Flutter Column 纵向排列、垂直排列

最新推荐文章于 2024-06-05 11:45:54 发布

原创最新推荐文章于 2024-06-05 11:45:54 发布 · 2.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Flutter Column 组件 #Flutter Column #Flutter #Flutter 垂直布局

Flutter 基础专栏收录该内容

73 篇文章

订阅专栏

本文详细解析了Flutter中Column布局的参数设置，包括mainAxisAlignment、crossAxisAlignment、mainAxisSize等属性的使用方法，通过具体代码示例展示了如何调整子元素的排列方式。

参数详解

属性	说明
mainAxisAlignment	X 轴排序方式 MainAxisAlignment.start MainAxisAlignment.end MainAxisAlignment.center MainAxisAlignment.spaceBetween ：间距相同首尾没有间距 MainAxisAlignment.spaceAround ：子元素平均充满 MainAxisAlignment.spaceEvenly ：间距相同首尾有间距
crossAxisAlignment	Y 轴的排序方式 CrossAxisAlignment.start CrossAxisAlignment.end CrossAxisAlignment.center CrossAxisAlignment.stretch ：子元素宽充满 CrossAxisAlignment.baseline
mainAxisSize	默认MainAxisSize.max
textDirection	正反排序 TextDirection.ltr TextDirection.rtl
verticalDirection	默认VerticalDirection.down
textBaseline	官方：如果根据基线对齐项目，则使用哪个基线。
children	子元素

代码示例

class MyBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
      width: 400,
      height: 600,
      child:Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment:CrossAxisAlignment.center,
        children: <Widget>[
          MyImage('https://raw.githubusercontent.com/think-ing/flutter_demo/master/images/a.jpg'),
          MyImage('https://raw.githubusercontent.com/think-ing/flutter_demo/master/images/b.jpg'),
          MyImage('https://raw.githubusercontent.com/think-ing/flutter_demo/master/images/c.jpg'),
          Text('abcdefg'),
          Text('cdefg'),
          Text('bcdefg'),
          Text('你好'),
        ],
      )
    );
  }
}



//定义一个 公共类
class MyImage extends StatelessWidget {
  String imgUrl;
  MyImage(this.imgUrl);
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100,
      width: 100,
      child: Image.network(this.imgUrl,fit: BoxFit.cover,),
    );
  }
}