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: () {},
            ),
          ],
        ),
      ),
    );
  }
}

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！