Flutter Row,Column和Expanded

最新推荐文章于 2024-07-07 10:26:08 发布

神也会困

最新推荐文章于 2024-07-07 10:26:08 发布

阅读量2k

点赞数

分类专栏： Flutter 文章标签： Flutter Row Column Expanded

本文链接：https://blog.csdn.net/qq_42572245/article/details/106605248

版权

Flutter 专栏收录该内容

32 篇文章 1 订阅

订阅专栏

1.Row

在这里插入图片描述

class HomeContext extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      width: 300,
      height: 400,
      color: Colors.cyan,//背景颜色
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround, //水平布局
        crossAxisAlignment: CrossAxisAlignment.center, //垂直布局
        children: <Widget>[
          iconContainer(Icons.access_alarms, 31, Colors.red), //自定义组件
          iconContainer(Icons.ac_unit, 31, Colors.yellow),
          iconContainer(Icons.account_balance, 31, Colors.blue)
        ],
      ),
    );
  }
}

//自定义按钮组件
class iconContainer extends StatelessWidget {
  IconData icon;
  double size;
  Color color;
  iconContainer(this.icon, [this.size, this.color]);//可变参数
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      width: 60,
      height: 60,
      color: this.color,
      child: Center(
        child: Icon(this.icon, size: this.size, color: Colors.white),
      ),
    );
  }
}

Column

在这里插入图片描述

class HomeContext extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      width: 300,
      height: 400,
      color: Colors.cyan,//背景颜色
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround, //主轴布局
        crossAxisAlignment: CrossAxisAlignment.center, //次轴布局
        children: <Widget>[
          iconContainer(Icons.access_alarms, 31, Colors.red), //自定义组件
          iconContainer(Icons.ac_unit, 31, Colors.yellow),
          iconContainer(Icons.account_balance, 31, Colors.blue)
        ],
      ),
    );
  }
}

//自定义按钮组件
class iconContainer extends StatelessWidget {
  IconData icon;
  double size;
  Color color;
  iconContainer(this.icon, [this.size, this.color]);//可变参数
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      width: 60,
      height: 60,
      color: this.color,
      child: Center(
        child: Icon(this.icon, size: this.size, color: Colors.white),
      ),
    );
  }
}

3.Expanded

在这里插入图片描述

class HomeContext extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return  Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround, //主轴布局
        crossAxisAlignment: CrossAxisAlignment.center, //次轴布局
        children: <Widget>[
          Expanded(
            flex: 1,
            child: iconContainer(Icons.access_alarms, 31, Colors.blue), //自定义组件,
          ),
          Expanded(
            flex: 2,
            child: iconContainer(Icons.home, 31, Colors.orange), //自定义组件,
          ),
        ],
      );

  }
}

//自定义按钮组件
class iconContainer extends StatelessWidget {
  IconData icon;
  double size;
  Color color;
  iconContainer(this.icon, [this.size, this.color]);//可变参数
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      width: 60,
      height: 60,
      color: this.color,
      child: Center(
        child: Icon(this.icon, size: this.size, color: Colors.white),
      ),
    );
  }
}

综合

在这里插入图片描述

class HomeContext extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Column(
      children: <Widget>[
        Container(
          height: 180,
          color: Colors.black,
        ),
        SizedBox(
          height: 10,
        ),
        Row(
          children: <Widget>[
            SizedBox(width: 10,),
            Expanded(
              flex: 2,
              child: Container(
                height: 180,
                child: Image.network(
                  "http://5b0988e595225.cdn.sohucs.com/images/20171108/e8d0b0ab35b14b33a499d74cbc52b43c.jpeg",
                  fit: BoxFit.cover,
                ),
              ),
            ),
            SizedBox(width: 10,),
            Expanded(
              flex: 1,
              child: Container(
                  height: 180,
                  child: ListView(
                    children: <Widget>[
                      Container(
                          height: 90,
                          child: Image.network(
                            "http://5b0988e595225.cdn.sohucs.com/images/20171108/ba1b73bec9784b9eae4416226abcddc7.jpeg",
                            fit: BoxFit.cover,
                          )),
                      SizedBox(
                        height: 10,
                      ),
                      Container(
                          height: 90,
                          child: Image.network(
                            "http://5b0988e595225.cdn.sohucs.com/images/20171108/ba1b73bec9784b9eae4416226abcddc7.jpeg",
                            fit: BoxFit.cover,
                          ))
                    ],
                  )),
            ),
            SizedBox(width: 10,),
          ],
        )
      ],
    );
  }
}