Flutter布局-Container 、Row、Expanded

基本组件运用:

Container、Row、Expanded、TextButton、Text

两个并排并平分宽度的按钮,以下是代码示例:

Container(
                // 仅设置left、right边距
                padding: EdgeInsets.only(left: 15, right: 15),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    // Expanded可自适应宽度
                    Expanded(
                        child: Container(
                      child: TextButton(
                        child:
                            Text('编辑', style: TextStyle(color: Color(0xff606060))),
                        onPressed: () {},
                      ),
                      // Container可设置背景色、边框、圆角
                      decoration: BoxDecoration(border: Border.all(color: Color(0xffdfdfdf)), borderRadius: BorderRadius.all(Radius.circular(5))),
                    )),
                    // 间隔
                    Container(
                      width: 15
                    ),
                    Expanded(
                        child: Container(
                            child: TextButton(
                              child: Text('编辑',
                                  style: TextStyle(color: Colors.white)),
                              onPressed: () {},
                            ),
                            decoration: BoxDecoration(color: Colors.red))),
                  ],

效果图如下:

Simulator Screen Shot - iPhone 12 - 2021-07-12 at 23.40.27.png

设置圆角和边框,可通过Container的decoration属性,如:

 decoration: BoxDecoration(border: Border.all(color: Color(0xffdfdfdf)), borderRadius: BorderRadius.all(Radius.circular(5))),

设置十六进制颜色:

Color(0xffdfdfdf)

设置Text的字体,可通过Text的style属性:

Text('编辑', style: TextStyle(color: Color(0xff606060))),

以上只是简单的一个布局,组件的布局可通过查看其拥有的属性来设置对应的值,方便快捷,不明白的属性只要亲自码一遍代码,运行看效果即可!

今天的分享就到这儿啦, 大家晚安~