Flutter尺寸调整插件sizable的使用

Sizable

让代码更易于管理并编写清晰的代码。复用常用的尺寸和间距小部件。

特性

此插件利用Flutter扩展方法，使像Padding、SizedBox、Align等经常被复用的小部件更加易于使用。

使用方法

Align小部件的使用

可以通过以下方式调用Align小部件，宽度对齐位置可以设置为'left'、'right'或'center'。

'left'.align(YourWidgetHere) // 左对齐

获取屏幕宽度

通过width(context)获取整个屏幕的宽度。

width(context)

// 示例：
SizedBox(width: width(context) * .5), // 宽度为屏幕宽度的一半

获取屏幕高度

通过height(context)获取整个屏幕的高度。

height(context)

// 示例：
SizedBox(height: height(context) * .5), // 高度为屏幕高度的一半

SizedBox高度扩展

SizedBox高度扩展可以这样使用：

heightInDouble.sizeh

// 示例：
20.sizeh // 等价于 SizedBox(height: 20)
20.5.sizeh // 等价于 SizedBox(height: 20.5)

你可以使用int或double作为前缀大小。

SizedBox宽度扩展

SizedBox宽度扩展可以这样使用：

widthInDouble.sizew

// 示例：
20.sizew // 等价于 SizedBox(width: 20)
20.5.sizew // 等价于 SizedBox(width: 20.5)

你可以使用int或double作为前缀大小。

EdgeInsets.all() 的使用

EdgeInsets.all() 可以这样使用：

spacing()

// 示例：
Padding(
  padding: spacing() // 等价于 EdgeInsets.all(10)
)

默认值为10。

EdgeInsets.symmetric() 的使用

EdgeInsets.symmetric() 可以这样使用：

spacingSym()

// 示例：
Padding(
  padding: spacingSym() // 等价于 EdgeInsets.symmetric(horizontal: 10, vertical: 10)
  padding: spacingSym(v: 15) // 等价于 EdgeInsets.symmetric(horizontal: 10, vertical: 15)
)

水平方向使用h，垂直方向使用v，两者默认值均为10。

EdgeInsets.only() 的使用

EdgeInsets.only() 可以这样使用：

spacingOnly()

// 示例：
Padding(
  padding: spacingOnly(t: 10, r: 15) // 等价于 EdgeInsets.only(top: 10, right: 15)
)

水平方向使用h，垂直方向使用v，顶部使用t，底部使用b，所有值默认为0。

示例代码

以下是一个完整的示例代码，展示了如何使用sizable插件。

import 'package:flutter/material.dart';
import 'package:sizable/sizable.dart'; // 引入sizable插件

void main() {
  runApp(MyApp()); // 启动应用
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sizable demo', // 应用标题
      theme: ThemeData(
        useMaterial3: true, // 使用Material Design 3
        primarySwatch: Colors.blue, // 主色调
      ),
      home: ExamplePage(), // 主页面
    );
  }
}

class ExamplePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sizable Example'), // 设置AppBar标题
      ),
      body: 'left'.align( // 左对齐
        Padding(
          padding: spacing(), // 设置内边距，等价于 EdgeInsets.all(10)
          child: Column(
            children: [
              'left'.align( // 左对齐
                Text('Left Aligned'), // 左对齐的文本
              ),
              20.sizeh, // 设置高度为20
              'center'.align( // 居中对齐
                Text('Center Aligned'), // 居中对齐的文本
              ),
              20.sizeh, // 设置高度为20
              'right'.align( // 右对齐
                Text('Right Aligned'), // 右对齐的文本
              ),
              20.sizeh, // 设置高度为20
            ],
          ),
        ),
      ),
    );
  }
}