FLUTTER学习笔记--布局

文章目录

  • 一、线性布局
    • 1.Column
    • 2.Row
    • 3.代码
    • 4.效果
  • 二、弹性布局
    • 1.Flex
    • 2.Expanded(可伸缩组件)
    • 3.代码
    • 4.效果
  • 三、流式布局
    • 1.Wrap(解决内容溢出问题)
    • 2.Chip(标签)
    • 3.CircleAvatar(圆形头像)
    • 4.代码
    • 5.效果
  • 四、层叠布局
    • 1.Stack(层叠组件)
    • 2.Positioned(绝对定位组件)
    • 3.NetworkImage(网络图片组件)
    • 4.代码
    • 5.效果
  • 五、Card
    • 1.Card(卡片)
    • 2.ListTile(列表瓦片)
    • 3.代码
    • 4.效果


一、线性布局

1.Column

  • Column中的主轴方向是垂直方向

  • mainAxisAlignment:MainAxisAlignment-主轴对齐方向

  • crossAxisAlignment:CrossAxisAlignment-交叉轴对齐方向

  • children:内容

2.Row

  • Row中的主轴方向是水平方向(其他属性与cross一致)

3.代码

class ColumnRowDemo extends StatelessWidget {
  const ColumnRowDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.lightGreen,
      width: double.infinity,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Icon(Icons.access_alarm,size: 50),
          Icon(Icons.accessible_forward,size: 50),
          Icon(Icons.settings,size: 50),
          Icon(Icons.add_a_photo,size: 50),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Icon(Icons.access_alarm,size: 50),
              Icon(Icons.accessible_forward,size: 50),
              Icon(Icons.settings,size: 50),
              Icon(Icons.add_a_photo,size: 50),
            ],
          )
        ],
      ),
    );
  }
}

4.效果

FLUTTER学习笔记--布局_第1张图片

二、弹性布局

1.Flex

  • direction(声明主轴方向)

  • mainAxisAlignment(声明主轴对齐方向)

  • textDirection(声明水平方向的排列顺序)

  • crossAxisAlignment(声明交叉方向轴对齐方式)

  • verticalDirection(声明垂直方向的排列顺序)

  • children(声明子组件)

2.Expanded(可伸缩组件)

  • flex(声明弹性布局所占比例)
  • child(声明子组件)

3.代码

class FlexDemo extends StatelessWidget {
  const FlexDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Row(
          children: [
            Container(
              color: Colors.lightBlue,
              height: 50,
              width: 50,
            ),
            Expanded(
              child: Container(
                color: Colors.lightGreen,
                height: 50,
              ),
            )
          ],
        ),
        Flex(
          direction: Axis.horizontal,
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          textDirection: TextDirection.rtl,
          children: [
            Icon(Icons.access_alarm, size: 50),
            Icon(Icons.accessible_forward, size: 50),
            Icon(Icons.settings, size: 50),
            Icon(Icons.add_a_photo, size: 50),
          ],
        ),
        Flex(
          direction: Axis.horizontal,
          children: [
            Expanded(
              child: Container(
                color: Colors.tealAccent,
                height: 50,
                width: 50,
              ),
              flex: 2,
            ),
            Expanded(
              child: Container(
                color: Colors.yellow,
                height: 50,
                width: 50,
              ),
              flex: 1,
            )
          ],
        ),
        Container(
            height: 100,
            margin: EdgeInsets.all(50),
            child: Flex(
              direction: Axis.vertical,
              verticalDirection: VerticalDirection.up,
              children: [
                Expanded(
                  child: Container(
                    color: Colors.tealAccent,
                    height: 50,
                    width: 50,
                  ),
                  flex: 2,
                ),
                Spacer(
                  flex: 1,
                ),
                Expanded(
                  child: Container(
                    color: Colors.yellow,
                    height: 50,
                    width: 50,
                  ),
                  flex: 1,
                )
              ],
            ),
        )
      ],
    );
  }
}

4.效果

FLUTTER学习笔记--布局_第2张图片

三、流式布局

1.Wrap(解决内容溢出问题)

  • spacing (主轴方向子组件的间距)

  • runSpacing (纵轴方向子组件的间距)

  • alignment (主轴方向子组件的对齐方式)

  • runAlignment (纵轴方向子组件的对齐方式)

2.Chip(标签)

3.CircleAvatar(圆形头像)

4.代码

class WrapDemo extends StatelessWidget {
  List<String> _list=[
    '曹操','司马懿','曹仁','曹洪','张辽','许褚'
  ];

  List<Widget> _weiGuo(){
    return _list.map((item) => Chip(
      avatar: CircleAvatar(
        backgroundColor: Colors.red,
        child: Text('魏'),
      ),
      label: Text(item),
    )).toList();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        Wrap(
          children: _weiGuo(),
          spacing: 18.0,
          runSpacing: 100,
          alignment: WrapAlignment.spaceAround,
          runAlignment: WrapAlignment.spaceAround,
        ),
        Wrap(
          children: [
            Chip(
              avatar: CircleAvatar(
                backgroundColor: Colors.blue,
                child: Text('蜀'),
              ),
              label: Text('刘备'),
            ),
            Chip(
              avatar: CircleAvatar(
                backgroundColor: Colors.blue,
                child: Text('蜀'),
              ),
              label: Text('关羽'),
            ),
            Chip(
              avatar: CircleAvatar(
                backgroundColor: Colors.blue,
                child: Text('蜀'),
              ),
              label: Text('张飞'),
            ),
            Chip(
              avatar: CircleAvatar(
                backgroundColor: Colors.blue,
                child: Text('蜀'),
              ),
              label: Text('赵云'),
            ),
            Chip(
              avatar: CircleAvatar(
                backgroundColor: Colors.blue,
                child: Text('蜀'),
              ),
              label: Text('诸葛亮'),
            ),
            Chip(
              avatar: CircleAvatar(
                backgroundColor: Colors.blue,
                child: Text('蜀'),
              ),
              label: Text('黄忠'),
            ),
          ],
        )
      ],
    );
  }
}

5.效果

FLUTTER学习笔记--布局_第3张图片

四、层叠布局

1.Stack(层叠组件)

  • alignment(声明未定位子组件的对齐方式)
  • textDirection(声明未定位子组件的排列顺序)

2.Positioned(绝对定位组件)

  • child(声明子组件)
  • left、top、right、bottom
  • width、height

3.NetworkImage(网络图片组件)

  • NetworkImage(‘图片地址’)

4.代码

class Stackdemo extends StatelessWidget {
  const Stackdemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Stack(
        textDirection: TextDirection.rtl,
        alignment: AlignmentDirectional.bottomEnd,
        children: [
          CircleAvatar(
            backgroundImage: NetworkImage('https://s1.ax1x.com/2022/10/31/xTY0Bt.jpg'),
            radius: 200,
          ),
          Positioned(
            child: Container(
              color: Colors.black12,
              padding: EdgeInsets.all(10),
              child: Text(
                '薇尔莉特',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 20
                ),
              ),
            ),
            top: 50,
            right: 40,
          ),
          Text(
            'hello',
            style: TextStyle(
                color: Colors.black,
                fontSize: 20
            ),
          ),
        ],
      ),
    );
  }
}

5.效果

FLUTTER学习笔记--布局_第4张图片

五、Card

1.Card(卡片)

  • child(子组件)
  • color(背景色)
  • shadowColor(阴影色)
  • elevation(阴影高度)
  • shape(边框样式)
  • margin(外边距)

2.ListTile(列表瓦片)

  • leading(头部组件)
  • title(标题)
  • subtitle(子标题)

3.代码

class CartDemo extends StatelessWidget {
  const CartDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Card(
          margin: EdgeInsets.all(30),
          color: Colors.green[100],
          shadowColor: Colors.yellow,
          elevation: 20,
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(40),
              side: BorderSide(
                color: Colors.yellow,
                width: 3,
              )
          ),
          child: Column(
            children: const [
              ListTile(
                leading: Icon(
                  Icons.accessible_forward_sharp,
                  size: 50,
                ),
                title: Text(
                  "OTTO",
                  style: TextStyle(fontSize: 20),
                ),
                subtitle: Text(
                  "吉吉国王",
                  style: TextStyle(fontSize: 20),
                ),
              ),
              Divider(),
              ListTile(
                title: Text(
                  "电话:000000000",
                  style: TextStyle(
                      fontSize: 20
                  ),
                ),
              ),
              ListTile(
                title: Text(
                  "地址:xxxxxxx",
                  style: TextStyle(
                      fontSize: 20
                  ),
                ),
              )
            ],
          ),
        ),
        Card(child: Column(
          children: const [
            ListTile(
              leading: Icon(
                Icons.accessible_forward_sharp,
                size: 50,
              ),
              title: Text(
                "OTTO",
                style: TextStyle(fontSize: 20),
              ),
              subtitle: Text(
                "吉吉国王",
                style: TextStyle(fontSize: 20),
              ),
            ),
            Divider(),
            ListTile(
              title: Text(
                "电话:000000000",
                style: TextStyle(
                    fontSize: 20
                ),
              ),
            ),
            ListTile(
              title: Text(
                "地址:xxxxxxx",
                style: TextStyle(
                    fontSize: 20
                ),
              ),
            )
          ],
        ),)
      ],
    );
  }
}

4.效果

FLUTTER学习笔记--布局_第5张图片

你可能感兴趣的:(flutter学习笔记,flutter,学习,android)