Flutter--页面布局

最新推荐文章于 2024-10-20 22:43:33 发布

wjxbless

最新推荐文章于 2024-10-20 22:43:33 发布

阅读量657

点赞数

分类专栏： Flutter 文章标签： dart flutter

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_39424143/article/details/104740159

版权

Flutter 专栏收录该内容

28 篇文章 3 订阅

订阅专栏

Padding组件

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.fromLTRB(0, 0, 10, 0),
      child: GridView.count(
        crossAxisCount: 2,
        childAspectRatio: 1.5,
        children: <Widget>[
          Padding(
            padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
            child: Image.network('https://profile.csdnimg.cn/B/0/A/1_qq_39424143',
                fit: BoxFit.cover),
          ),
          Padding(
            padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
            child: Image.network('https://profile.csdnimg.cn/B/0/A/1_qq_39424143',
                fit: BoxFit.cover),
          ),
          Padding(
            padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
            child: Image.network('https://profile.csdnimg.cn/B/0/A/1_qq_39424143',
                fit: BoxFit.cover),
          ),
          Padding(
            padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
            child: Image.network('https://profile.csdnimg.cn/B/0/A/1_qq_39424143',
                fit: BoxFit.cover),
          ),
          Padding(
            padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
            child: Image.network('https://profile.csdnimg.cn/B/0/A/1_qq_39424143',
                fit: BoxFit.cover),
          ),
          Padding(
            padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
            child: Image.network('https://profile.csdnimg.cn/B/0/A/1_qq_39424143',
                fit: BoxFit.cover),
          ),
        ],
      ),
    );
  }
}

在这里插入图片描述

Row水平布局组件

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 700,
      width: 500,
      color: Colors.black26,
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center, // 垂直方向排列未居中
        mainAxisAlignment: MainAxisAlignment.spaceEvenly, // 类似于weight, 在这里使水平方向均匀分布
        children: <Widget>[
          IconContainer(Icons.home, color: Colors.red),
          IconContainer(Icons.search, color: Colors.blue),
          IconContainer(Icons.send, color: Colors.orange),
        ],
      ),
    );
  }
}

class IconContainer extends StatelessWidget {
  double size;
  IconData icon;
  Color color;


  IconContainer(this.icon, {this.size, this.color = Colors.blue}) {
    this.size = 32.0;
  }


  @override
  Widget build(BuildContext context) {
    return Container(
        width: this.size + 60,
        height: this.size + 60,
        color: this.color,
        child: Center(
            child: Icon(this.icon, color: Colors.white, size: this.size)));
  }
}

在这里插入图片描述

Column垂直布局

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 700,
      width: 500,
      color: Colors.black26,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center, // 水平方向排列未居中
        mainAxisAlignment: MainAxisAlignment.spaceEvenly, // 类似于weight, 在这里使水平方向均匀分布
        children: <Widget>[
          IconContainer(Icons.home, color: Colors.red),
          IconContainer(Icons.search, color: Colors.blue),
          IconContainer(Icons.send, color: Colors.orange),
        ],
      ),
    );
  }
}

在这里插入图片描述

Expand

属性	释义
flex	元素占父布局的比例,类似于weight

@override
Widget build(BuildContext context) {
  return Row(


    children: <Widget>[
      Expanded(
          flex: 1,
          child: IconContainer(Icons.search,color: Colors.blue)
      ),
      Expanded(
        flex: 2,
        child: IconContainer(Icons.home,color: Colors.orange),
      ),
      Expanded(
        flex: 1,
        child: IconContainer(Icons.select_all,color: Colors.red),
      ),


    ],
  );
}

在这里插入图片描述