【Flutter】Flutter 组件 ② ( 组件大小设置 | 固定大小 | 自适应大小 | 填充父容器

文章目录

一、固定大小
- [1、固定大小推荐用法](#1、固定大小推荐用法)
- [2、其它设置固定大小的组件](#2、其它设置固定大小的组件)
- 3、固定大小用法总结
二、自适应大小
三、充满父容器
四、百分比宽高

参考文档 :

Flutter 官方文档 : https://docs.flutter.dev/install/quick
使用出现网络问题 , 参考在中国网络环境下使用 Flutter 文档 ;

Flutter 里 3 种最常用的尺寸设置 :

固定大小 : 写死宽高 ;
自适应大小 : 根据子组件内容自动撑开 ;
填充父容器 : 占满父容器宽度 / 高度 / 全屏 ;

一、固定大小

1、固定大小推荐用法

固定大小 : 强制组件变成固定的宽度和高度 , 不随父容器、子组件变化 ;

最常用 : SizedBox、ConstrainedBox
最轻量 : SizedBox , 推荐用法 ;
最灵活 : ConstrainedBox

推荐用法 : Flutter 官方推荐使用 Container(width, height) 或 SizedBox(width, height) 设置固定大小 ; 如果只需要设置固定大小 , 首选 SizedBox 组件 ;

SizedBox : 只负责大小 / 间距 ( 最轻量 )
Container : 全能容器 ( 大小 + 背景 + 边距 + 对齐 + 装饰 + 边框 )

dart 复制代码

// 方法1 : Container
Container(
  width: 200,
  height: 100,
  child: Text("固定大小"),
)

// 方法2 : SizedBox ( 更轻量 ) 
SizedBox(
  width: 200,
  height: 100,
  child: Text("固定大小"),
)

2、其它设置固定大小的组件

其它设置固定大小的组件 :

ConstrainedBox 组件强制固定大小 : 给子组件设置固定 / 最大 / 最小宽高 , 该用法等同于固定宽高 , 比 SizedBox 更灵活 ;

dart 复制代码

ConstrainedBox(
  constraints: BoxConstraints(
    minWidth: 100,
    maxWidth: 100,
    minHeight: 50,
    maxHeight: 50,
  ),
  child: Text("固定大小 100x50"),
)

LimitedBox 组件设置受限固定大小 : 在无约束环境 ( 如 ListView、Row ) 中设置固定大小 ;

dart 复制代码

LimitedBox(
  maxWidth: 100,
  maxHeight: 50,
  child: Text("固定大小"),
)

FractionallySizedBox 组件设置固定大小 : 该组件是百分比布局组件 , 但配合父容器可以实现固定尺寸效果 ;
Padding 间接设置固定大小 :

dart 复制代码

Padding(
  padding: EdgeInsets.symmetric(horizontal: 20),
  child: SizedBox(width: 60), // 总宽度 = 60 + 20 + 20 = 100
)

Transform 变换组件设置固定大小 :

dart 复制代码

Transform.scale(
  child: SizedBox(
    width: 100,
    height: 50,
    child: Text("固定大小"),
  ),
)

Align 组件设置固定大小 ;

dart 复制代码

Align(
  widthFactor: 1,
  heightFactor: 1,
  child: SizedBox(width:100, height:50),
)

3、固定大小用法总结

最推荐 : SizedBox 轻量版 → SizedBox.shrink () , 这是 Flutter 官方推荐固定大小组件 , 最轻量 ;

dart 复制代码

SizedBox(
  width: 100,
  height: 50,
  child: Text("固定大小"),
)

自定义固定大小 , 不推荐 , 操作很繁琐 ;

dart 复制代码

class FixedSizeWidget extends StatelessWidget {
  final Widget child;
  const FixedSizeWidget({required this.child});
  
  @override
  Widget build(BuildContext context) {
    return UnconstrainedBox(
      child: SizedBox(width:100, height:50, child: child),
    );
  }
}

二、自适应大小

自适应大小 : 组件不设置宽高 , 自动被子组件内容撑开 ; 不给父容器设置 width / height 即可 ;

所有组件适用 : Container、Row、Column、Stack、Padding 几乎所有组件都适用该理论 ;

dart 复制代码

Container(
  // 不写宽高自适应
  child: Text("我会自动撑开父容器"),
)

SizedBox(
  // 不写宽高自适应
  child: Text("我自适应！"),
)

只设置宽高的一边 , 另一边自适应 :

dart 复制代码

Container(
  width: 200,    // 固定宽度
  // 不写 height → 高度自适应
  child: Text("高度会自动撑开"),
)

Row / Column 主轴默认自适应 :

dart 复制代码

Row(
  children: [
    Text("短文字"),
    Text("长一点的文字"),
  ],
)

CrossAxisAlignment.stretch 让交叉轴填满 , 但主轴依然自适应 :

dart 复制代码

Row(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [Text("我高度被撑开了")],
)

Wrap → 自带自适应 + 自动换行 :

dart 复制代码

Wrap(
  children: [
    Chip(label: Text("标签1")),
    Chip(label: Text("标签2")),
  ],
)

UnconstrainedBox → 取消父约束 , 让子组件自适应 :

dart 复制代码

UnconstrainedBox(
  child: Text("我不受父容器限制 , 自适应大小"),
)

IntrinsicWidth / IntrinsicHeight → 精准自适应内容固有尺寸 :

dart 复制代码

IntrinsicWidth(
  child: Column(
    children: [
      Text("短"),
      Text("比较长一点"),
    ],
  ),
)

三、充满父容器

宽高填充父容器就是让子组件宽度 / 高度 / 全部占满父容器 ;

宽高设置 double.infinity ( 推荐用法 ) : Container 自己填充满 Container 的父容器 ;

dart 复制代码

Container(
  width: double.infinity,  // 宽度填满父容器
  height: double.infinity, // 高度填满父容器
  child: Text("填满父容器"),
)

使用 FractionallySizedBox 百分比填充组件 : 设置 FractionallySizedBox 组件填充满 FractionallySizedBox 的父容器的宽高的 50% ;

dart 复制代码

FractionallySizedBox(
  widthFactor: 0.5,  // 直接 = 父容器 50% 宽
  heightFactor: 0.5, // 直接 = 父容器 50% 高
  child: Container(color: Colors.blue),
)

使用 Expanded / Flexible 组件 : 用来占满剩余空间 , 该用法只能在 Row/Column 中使用 ;

dart 复制代码

Column(
  children: [
    Expanded(
      child: Container(child: Text("占满剩余空间")),
    ),
  ],
)

// 灵活填充
Flexible(
  fit: FlexFit.tight,  // 填充满
  child: Container(),
)

使用 Align + widthFactor /heightFactor 组件 : 子容器大小固定了 , 设置父容器的大小 = 子容器大小 ;

dart 复制代码

Align(
  widthFactor: 1,
  heightFactor: 1,
  child: Container(),
)

四、百分比宽高

Flutter 中使用如下三种方法设置百分比宽高 :

FractionallySizedBox 组件 ( 推荐用法 ) : 通过 widthFactor 和 heightFactor 属性设置相对父容器百分比 , 子组件宽高 = 父容器宽高 × 系数 ( 0~1 ) ;
- 不设 factor → 撑满父容器 ( 等价于 1.0 )
- factor > 1 → 超出父容器 ( 可用于溢出效果 )

dart 复制代码

Container(
  width: 300,
  height: 200,
  color: Colors.grey[200],
  child: FractionallySizedBox(
    widthFactor: 0.8,  // 父宽的80%
    heightFactor: 0.5, // 父高的50%
    child: Container(color: Colors.red),
  ),
)

// 占满父容器 
FractionallySizedBox(
  widthFactor: 1,
  heightFactor: 1,
  child: xxx,
)

MediaQuery 获取屏幕宽高 : 设置相对屏幕百分比 , 宽高 = 屏幕宽高 × 百分比 , 下面的代码是屏幕宽 50% , 屏幕高 30% ;

dart 复制代码

Widget build(BuildContext context) {
  final screen = MediaQuery.of(context).size;

  return Container(
    width: screen.width * 0.5,   // 屏幕宽50%
    height: screen.height * 0.3, // 屏幕高30%
    color: Colors.blue,
  );
}

// 屏幕宽度 100%
Container(
  width: MediaQuery.of(context).size.width,
  child: xxx,
)

LayoutBuilder 设置相对父容器约束百分比 : 拿到父容器约束 ( maxWidth/maxHeight ) 后计算百分比 , 适合父容器动态宽高 , 又要精确百分比 ;

dart 复制代码

Container(
  width: 300,
  height: 200,
  color: Colors.grey[200],
  child: LayoutBuilder(
    builder: (context, constraints) {
      return Container(
        width: constraints.maxWidth * 0.9,
        height: constraints.maxHeight * 0.4,
        color: Colors.green,
      );
    },
  ),
)

// 父容器 50%
LayoutBuilder(
  builder: (_, c) => Container(
    width: c.maxWidth * 0.5,
    height: 120,
  ),
)

【Flutter】Flutter 组件 ② ( 组件大小设置 | 固定大小 | 自适应大小 | 填充父容器 | 百分比大小 )

文章目录

一、固定大小

1、固定大小 推荐用法

2、其它设置 固定大小 的组件

3、固定大小用法总结

二、自适应大小

三、充满父容器

四、百分比宽高

1、固定大小推荐用法

2、其它设置固定大小的组件