首页 > 建站教程 > APP开发,混合APP >  Flutter笔记23:Expanded和Flexible组件正文

Flutter笔记23:Expanded和Flexible组件

Expanded和Flexible组件都是填充组件,都是配合Row或Column或Flex组件使用,决定剩下的空间如何分配,Expanded会将剩下的空间填充完,但Flexible不会
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: () {},
            ),
          ],
        ),
      ),
    );
  }
}