Flutter 学习笔记 (四)Padding、Row、Column、Expanded组件

Flutter 学习笔记 (一)安装及运行
Flutter 学习笔记 (二)Container组件、Text组件、图片组件
Flutter 学习笔记 (三)列表
Flutter 学习笔记 (四)Padding、Row、Column、Expanded组件
Flutter 学习笔记 (五)Stack & Align、Strack & Positioned 布局组件
Flutter 学习笔记 (六)Card、AspectRatio、CircleAvatar 组件
Flutter 学习笔记 (七)RaisedBotton、Wrap组件
Flutter 学习笔记 (八)StatefulWidget组件
Flutter 学习笔记( 九)BottomNavigationBar 组件 底部导航
Flutter 学习笔记 (十)AppBar 定义 Tab 切换
Flutter 学习笔记 (十一) Drawer 侧边栏
Flutter 学习笔记 (十二)floatingActionButton 类似闲鱼按钮
Flutter 学习笔记 (十三)TextField、Checkbox、Radio 组件
Flutter 学习笔记 (十四)时间组件
Flutter 学习笔记 (十五)flutter_swiper 轮播组件
Flutter 学习笔记 (十六)Dialog 组件
Flutter 学习笔记 (十七)网络数据请求
Flutter 学习笔记 (十八)路由跳转

Padding

Padding组件中,设置EdgeInsets,将内容嵌套到child组件中
设置左上右下的内边距,目的是间距相同
当使用EdgeInsets.all()设置是,会导致水平和竖直方向上的间距扩大两倍
所以使用EdgeInsets.fromLTRB,只设置两个方向的,但是会产生右侧没有内边距,所以整体嵌套在一个Container中,并设置另外两个方向的Padding属性

Container(
  padding: EdgeInsets.fromLTRB(0, 0, 20, 20),
  child: GridView.count(
    crossAxisCount: 2,
    childAspectRatio: 1.7,
    children: <Widget>[
      Padding(
        padding: EdgeInsets.fromLTRB(20, 20, 0, 0),
        child: Image.network('https://www.itying.com/images/flutter/1.png',fit: BoxFit.cover,),
      ),
      Padding(
        padding: EdgeInsets.fromLTRB(20, 20, 0, 0),
        child: Image.network('https://www.itying.com/images/flutter/2.png',fit: BoxFit.cover,),
      ),
      Padding(
        padding: EdgeInsets.fromLTRB(20, 20, 0, 0),
        child: Image.network('https://www.itying.com/images/flutter/3.png',fit: BoxFit.cover,),
      ),
      Padding(
        padding: EdgeInsets.fromLTRB(20, 20, 0, 0),
        child: Image.network('https://www.itying.com/images/flutter/4.png',fit: BoxFit.cover,),
      ),
      Padding(
        padding: EdgeInsets.fromLTRB(20, 20, 0, 0),
        child: Image.network('https://www.itying.com/images/flutter/1.png',fit: BoxFit.cover,),
      ),
      Padding(
        padding: EdgeInsets.fromLTRB(20, 20, 0, 0),
        child: Image.network('https://www.itying.com/images/flutter/2.png',fit: BoxFit.cover,),
      ),
      Padding(
        padding: EdgeInsets.fromLTRB(20, 20, 0, 0),
        child: Image.network('https://www.itying.com/images/flutter/3.png',fit: BoxFit.cover,),
      ),
      Padding(
        padding: EdgeInsets.fromLTRB(20, 20, 0, 0),
        child: Image.network('https://www.itying.com/images/flutter/4.png',fit: BoxFit.cover,),
      ),
    ],
  ),
);

在这里插入图片描述

Row

横向排列的方式 mainAxisAlignment
通过构造函数实现不同图标的类型、颜色、大小等
注意构造函数的写法,对于可选的参数传递,需要在构造函数内部使用??=进行初始值的设置

class HomeContent extends StatelessWidget {

  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      height: 120,
      width: 400,
      color: Colors.pink[200],
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          IconContainer(Icons.home),        
          IconContainer(Icons.settings),
          IconContainer(Icons.search),
        ],
      ),
    );
  }
}

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

  IconContainer(this.icon,{this.sz,this.color}){
    this.sz??=50;
    this.color??=Colors.red;
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      height: 100,
      width: 100,
      // color: Colors.red,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        border: Border.all(width: 1,color: Colors.red,),
        color: Colors.yellow[100],
      ),
      child: Center(child: Icon(this.icon,size: this.sz,color: Colors.blue,),),
    );
  }
}

在这里插入图片描述

Column

和Row相同
在这里插入图片描述

Expanded

在这里插入图片描述
构建如图所示的布局,可以使用Expanded组件,他能够根据flex属性自动调整比例,整个布局结构如下图所示
在这里插入图片描述
一般来讲,ExpandedContainer结合使用,在Container中定义了高度,宽度则会自动填充铺满

class HomeContent extends StatelessWidget {

  Widget build(BuildContext context) {
    // TODO: implement build
    return Column(
      children: <Widget>[
        Row(
          children: <Widget>[
            Expanded(
              child: Container(
                height: 200,
                decoration: BoxDecoration(
                  color: Colors.black,
                ),
              ),
            ),
          ],
        ),
        SizedBox(
          height: 10,
        ),
        Row(
          children: <Widget>[
            Expanded(
              flex: 2,
              child: Container(
                height: 180,
                child: Image.network('https://www.itying.com/images/flutter/1.png',fit: BoxFit.cover),
              ),
            ),
            SizedBox(
              width: 10,
            ),
            Expanded(
              flex: 1,
              child: Container(
                height: 180,
                child: ListView(
                  children: <Widget>[
                    Container(
                      height: 85,
                      child: Image.network('https://www.itying.com/images/flutter/2.png',fit: BoxFit.cover,),
                    ),
                    SizedBox(
                      height: 10,
                    ),
                    Container(
                      height: 85,
                      child: Image.network('https://www.itying.com/images/flutter/3.png',fit: BoxFit.cover,),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ],
    );
  }
}
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值