美文网首页Flutter
flutter Container组件大小调整技巧

flutter Container组件大小调整技巧

作者: 小话001 | 来源:发表于2021-02-02 17:32 被阅读0次

    除了常规的设置 宽高外。Container默认是适配子控件大小的,但当设置对齐方式时Container将会填满父控件,是否填满剩余空间取决于子控件是否需要填满父控件。
    请看下面区别

    1. 情形1
    class BodyDemo extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Row(
          children: <Widget>[
            Container(
              color: Colors.blue,
              height: 50,
              width: 100,
            ),
            Flexible(
                child: Container(
                  color: Colors.red,
                  height: 50,
                  child: Text('Container',style: TextStyle(color: Colors.white),),
                )
            ),
            Container(
              color: Colors.blue,
              height: 50,
              width: 100,
            ),
          ],
        );
      }
    }
    
    效果图:
    01.jpg
    1. 情形2
    class BodyDemo extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Row(
          children: <Widget>[
            Container(
              color: Colors.blue,
              height: 50,
              width: 100,
            ),
            Flexible(
                child: Container(
                  color: Colors.red,
                  height: 50,
                  alignment: Alignment.center,
                  child: Text('Container',style: TextStyle(color: Colors.white),),
                )
            ),
            Container(
              color: Colors.blue,
              height: 50,
              width: 100,
            ),
          ],
        );
      }
    }
    
    效果图:
    02.jpg
    二者唯一的差别之处就是: 是否设置了container的对齐方式alignment

    相关文章

      网友评论

        本文标题:flutter Container组件大小调整技巧

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