Expanded Widget

作者: imuzi | 来源:发表于2019-01-10 17:30 被阅读3次

    Flutter布局的时候基本都使用行和列,基本都是按照相同比列进行排列显示的.如果想让其中一个拉伸并填充余下的空间,只需要在子控件外加上Expanded即可.
    设置fix可以增加子控件的权重.


    
    import 'package:flutter/material.dart';
    
    class GoogleExpand extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                Container(
                  width: 50.0,
                  height: 50.0,
                  color: Colors.green,
                ),
                Expanded(
                  flex: 1,
                  child: Container(
                    width: 50.0,
                    height: 50.0,
                    color: Colors.red,
                    child: Text('flex: 1'),
                  ),
                ),
                Container(
                  width: 50.0,
                  height: 50.0,
                  color: Colors.orange,
                ),
              ],
            ),
            SizedBox(
              height: 20.0,
            ),
            Row(
              children: <Widget>[
                Container(
                  width: 50.0,
                  height: 50.0,
                  color: Colors.green,
                ),
                Expanded(
                  flex: 2,
                  child: Container(
                    width: 50.0,
                    height: 50.0,
                    color: Colors.red,
                    child: Text('flex: 2'),
                  ),
                ),
    
                Container(
                  width: 50.0,
                  height: 50.0,
                  color: Colors.orange,
                ),
                Expanded(
                  flex: 1,
                  child: Container(
                    width: 50.0,
                    height: 50.0,
                    color: Colors.blue,
                    child: Text('flex: 1'),
                  ),
                ),
              ],
            )
          ],
        );
      }
    }
    
    

    我的博客

    相关文章

      网友评论

        本文标题:Expanded Widget

        本文链接:https://www.haomeiwen.com/subject/dgnarqtx.html