class MyApp extends StatelessWidget {
const MyApp({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Expanded和Flexible组件',
home: Scaffold(
appBar: AppBar(
title: Text('Expanded和Flexible组件'),
),
body: Row(
children: [
RaisedButton(
color: Colors.orange,
child: Text('橙色的按钮'),
//此属性为null或者不写,则按钮为禁用状态,上面的颜色设置将无效
onPressed: () {},
),
// //Expanded填充两个按钮之间的空间
// Expanded(
// //填充剩余空间,将两边的按钮撑开
// flex: 1,
// child: RaisedButton(
// color: Colors.pink,
// child: Text('粉色的按钮'),
// //此属性为null或者不写,则按钮为禁用状态,上面的颜色设置将无效
// onPressed: () {},
// ),
// ),
//Flexible填充两个按钮之间的空间
Flexible(
//Flexible加了此属性也无效,还是没有撑开剩余空间
flex: 1,
child: RaisedButton(
color: Colors.pink,
child: Text('粉色的按钮'),
//此属性为null或者不写,则按钮为禁用状态,上面的颜色设置将无效
onPressed: () {},
),
),
RaisedButton(
color: Colors.red,
child: Text('红色的按钮'),
//此属性为null或者不写,则按钮为禁用状态,上面的颜色设置将无效
onPressed: () {},
),
],
),
),
);
}
} Flutter笔记23:Expanded和Flexible组件
Expanded和Flexible组件都是填充组件,都是配合Row或Column或Flex组件使用,决定剩下的空间如何分配,Expanded会将剩下的空间填充完,但Flexible不会
