Flutter开发之——多组件布局容器-权重组件(Flexible、Expanded、Spacer)
在Flutter中,Flexible
、Expanded
和Spacer
是用于构建灵活布局的组件。以下是它们的简单使用示例:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Column(
children: <Widget>[
Flexible(
flex: 2,
child: Container(color: Colors.red,),
),
Expanded(
child: Container(color: Colors.green,),
),
Flexible(
flex: 1,
child: Container(color: Colors.blue,),
),
],
),
),
);
}
}
在这个例子中:
Flexible
用于在Column
中创建一个可以伸缩的空间。flex
属性定义了该空间相对于其他可伸缩空间的伸缩比例。Expanded
用于在Column
或Row
中填充剩余的空间。如果有多个Expanded
组件,则它们会平分可用空间。
如果你需要在两个组件之间添加空白空间,可以使用Spacer
,它会在Column
或Row
中填充空白空间。
Column(
children: <Widget>[
Flexible(
child: Container(color: Colors.red),
),
Spacer(), // 添加空白空间
Flexible(
child: Container(color: Colors.blue),
),
],
),
Spacer
本身是一个Flexible
组件,默认占用0个视口单位,在Column
或Row
中表现为0宽度,在Flex
或Column
中表现为0高度。
评论已关闭