Flutter Row 横向排列、水平排列

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

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

0 ·

CC 4.0 BY-SA版权

文章标签：

#Flutter #Flutter Row #Flutter Row 组件 #Flutter水平布局

Flutter 基础专栏收录该内容

73 篇文章

订阅专栏

本文详细解析了Flutter中Row组件的参数设置，包括mainAxisAlignment、crossAxisAlignment等属性，以及它们如何影响子元素的排列方式。通过代码示例展示了不同属性设置下的布局效果。

参数详解

属性	说明
mainAxisAlignment	主轴的排序方式 MainAxisAlignment.start MainAxisAlignment.end MainAxisAlignment.center MainAxisAlignment.spaceBetween ：间距相同首尾没有间距 MainAxisAlignment.spaceAround ：子元素平均充满 MainAxisAlignment.spaceEvenly ：间距相同首尾有间距
crossAxisAlignment	次轴的排序方式 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: 400,
      child:Row(
        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,),
    );
  }
}