Flutter常用的布局组件和容器组件

/ 0评 / 1

常用的容器组件

class Layout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      color: Colors.red,
      child: Container(
        color: Colors.blue,
        margin: const EdgeInsets.all(15),
      ),
    );
  }
}

效果如下

class Layout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      color: Colors.white,
      child: SafeArea(
          child:Scaffold(
            appBar: AppBar(
              backgroundColor: Colors.lightBlue,
              title: Text('容器组件'),
            ),
            body: Padding(
              padding: const EdgeInsets.all(10),
              child: Container(
                color: Colors.blue,
                margin: const EdgeInsets.all(15),
              ),
            ),
          )
      ),
    );
  }
}

效果如下

常用的布局组件

class Layout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      color: Colors.white,
      child: SafeArea(
          child:Scaffold(
            appBar: AppBar(
              backgroundColor: Colors.lightBlue,
              title: Text('容器组件'),
            ),
            body: Column(
              mainAxisAlignment: MainAxisAlignment.start,  //子元素横向排布开始位置
              crossAxisAlignment: CrossAxisAlignment.start, //子元素纵向排布开始位置
              mainAxisSize: MainAxisSize.max,   //宽度
              children: <Widget>[
                Container(
                  height: 50,
                  color: Colors.red,
                ),
                Container(
                  height: 50,
                  color: Colors.yellow,
                ),
                Expanded( //占据剩余所有空间
                    child: Container(
                      color: Colors.green,
                    ),
                )
              ],
            )
          )
      ),
    );
  }
}

效果如下

class Layout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      color: Colors.white,
      child: SafeArea(
          child:Scaffold(
            appBar: AppBar(
              backgroundColor: Colors.lightBlue,
              title: Text('容器组件'),
            ),
            body: Column(
              mainAxisAlignment: MainAxisAlignment.start,  //子元素横向排布开始位置
              crossAxisAlignment: CrossAxisAlignment.start, //子元素纵向排布开始位置
              mainAxisSize: MainAxisSize.max,   //宽度
              children: <Widget>[
                Row(
                  mainAxisAlignment: MainAxisAlignment.start,  //子元素纵向排布开始位置
                  crossAxisAlignment: CrossAxisAlignment.start, //子元素横向排布开始位置
                  mainAxisSize: MainAxisSize.max,   //宽度
                  children: <Widget>[
                    Expanded(
                        child: Container(
                          height: 50,
                          color: Colors.red,
                        ),
                    ),
                    Expanded(
                      child: Container(
                        height: 50,
                        color: Colors.purple,
                      ),
                    ),
                  ],
                ),
                Container(
                  height: 50,
                  color: Colors.yellow,
                ),
                Expanded( //占据剩余所有空间
                    child: Container(
                      color: Colors.green,
                    ),
                )
              ],
            )
          )
      ),
    );
  }
}

效果如下

class Layout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      color: Colors.white,
      child: SafeArea(
          child:Scaffold(
            appBar: AppBar(
              backgroundColor: Colors.lightBlue,
              title: Text('容器组件'),
            ),
            body: Center(
              child: Stack(
                children: <Widget>[
                  Container(
                    width: 100,
                    height: 100,
                    color: Colors.green,
                  ),
                  Positioned(
                    left: 10,
                    top: 10,
                    child: Text('左上角'),
                  ),
                  Positioned(
                    right: 10,
                    bottom: 10,
                    child: Text('右下角'),
                  ),
                ],
              ),
            )
          )
      ),
    );
  }
}

效果如下

评论已关闭。