Flutter学习第三课-布局组件 Row和Column

最新推荐文章于 2024-05-12 21:52:22 发布

不求人Stone

最新推荐文章于 2024-05-12 21:52:22 发布

阅读量1.4k

点赞数

分类专栏： Flutter 文章标签： flutter

本文链接：https://blog.csdn.net/chen1234219/article/details/105051221

版权

Flutter 专栏收录该内容

14 篇文章 3 订阅

订阅专栏

线性布局

所谓线性布局，即指沿水平或垂直方向排布子组件。Flutter中通过Row和Column来实现线性布局。
Row 水平布局，Column 垂直布局
Row 和 Column 组件是不可以滚动的，所以在 Row 和Column 组件中不会放置过多子组件，如果你需- 要滚动应该使用 ListView。
如果只有一个子组件的话，应该考虑使用使用 Align 或者 Container 组件来定位这个子组件。
在使用Row 和 Colum 中我们常常会有等分按钮的需求，可与使用 Expanded 组件包裹该子组件实现需求

主轴和纵轴

对于线性布局，有主轴和纵轴之分，如果布局是沿水平方向，那么主轴就是指水平方向，而纵轴即垂直方向；如果布局沿垂直方向，那么主轴就是指垂直方向，而纵轴就是水平方向。在线性布局中，有两个定义对齐方式的枚举类MainAxisAlignment和CrossAxisAlignment，分别代表主轴对齐和纵轴对齐。

Row 水平布局

Row({
  ...  
  TextDirection textDirection,    
  MainAxisSize mainAxisSize = MainAxisSize.max,    
  MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
  VerticalDirection verticalDirection = VerticalDirection.down,  
  CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
  List<Widget> children = const <Widget>[],
})

textDirection：表示水平方向子组件的布局顺序(是从左往右还是从右往左)，默认为系统当前Locale环境的文本方向(如中文、英语都是从左往右，而阿拉伯语是从右往左)。
mainAxisSize：表示Row主轴(水平)方向，
MainAxisSize.max，水平方向撑满；
MainAxisSize.min，所有子组件宽度之和；
mainAxisAlignment：表示子组件在Row所占用的水平对齐(包含start、end、 center三个值)
mainAxisSize值为MainAxisSize.min，则此属性无意义，因为子组件的宽度等于Row的宽度。
mainAxisSize值为MainAxisSize.max，此属性才有意义，
MainAxisAlignment.start表示沿textDirection的初始方向对齐
textDirection取值为TextDirection.ltr时表示左对齐，
textDirection取值为TextDirection.rtl时表示从右对齐。
MainAxisAlignment.end和MainAxisAlignment.start正好相反；
MainAxisAlignment.center表示居中对齐。
verticalDirection：表示Row纵轴（垂直）的对齐方向
VerticalDirection.down，表示从上到下。
VerticalDirection.up，表示从下到上。
crossAxisAlignment：表示子组件在纵轴方向的对齐方式(包含start、end、 center三个值)
crossAxisAlignment.start表示沿VerticalDirection的初始方向对齐
verticalDirection取值为VerticalDirection.down 时表示顶部对齐
verticalDirection取值为VerticalDirection.up 时表示底部对齐
crossAxisAlignment.end和crossAxisAlignment.start正好相反；
crossAxisAlignment.center表示居中对齐。
children ：子组件数组。

在这里插入图片描述

/*
  Row({
    Key key,
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
      子组件沿着 Main 轴（在 Row 中是横轴）如何摆放，其实就是子组件排列方式，可选值有：
      MainAxisAlignment.start：靠左排列
      MainAxisAlignment.end：靠右排列
      MainAxisAlignment.center：居中排列
      MainAxisAlignment.spaceAround：每个子组件左右间隔相等，也就是 margin 相等
      MainAxisAlignment.spaceBetween：两端对齐，也就是第一个子组件靠左，最后一个子组件靠右，剩余组件在中间平均分散排列
      MainAxisAlignment.spaceEvenly：每个子组件平均分散排列，也就是宽度相等
    MainAxisSize mainAxisSize = MainAxisSize.max,
      Main 轴大小，可选值有：
      MainAxisSize.max：相当于 Android 的 match_parent
      MainAxisSize.min：相当于 Android 的 wrap_content
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
      子组件沿着 Cross 轴（在 Row 中是纵轴）如何摆放，其实就是子组件对齐方式，可选值有：
      CrossAxisAlignment.start：子组件在 Row 中顶部对齐
      CrossAxisAlignment.end：子组件在 Row 中底部对齐
      CrossAxisAlignment.center：子组件在 Row 中居中对齐
      CrossAxisAlignment.stretch：拉伸填充满父布局
      CrossAxisAlignment.baseline：在 Row 组件中会报错
    TextDirection textDirection,
      子组件排列顺序，可选值有：
      TextDirection.ltr：从左往右开始排列
      TextDirection.rtl：从右往左开始排列
    VerticalDirection verticalDirection = VerticalDirection.down,
      确定如何在垂直方向摆放子组件，以及如何解释 start 和 end，指定 height 可以看到效果，可选值有：
      VerticalDirection.up：Row 从下至上开始摆放子组件，此时我们看到的底部其实是顶部
      VerticalDirection.down：Row 从上至下开始摆放子组件，此时我们看到的顶部就是顶部
    TextBaseline textBaseline,
    List<Widget> children = const <Widget>[],
  })
*/
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: "Row",
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text("Row"),
        ),
        body: Container(
            height: 300,
            child: Column(
              children: <Widget>[
                Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  mainAxisSize: MainAxisSize.max,
                  textDirection: TextDirection.ltr,
                  verticalDirection: VerticalDirection.down,
                  children: <Widget>[
                    Text(
                      "Text1",
                      style: TextStyle(
                          fontSize: 40.0, backgroundColor: Color(0xFFFF0000)),
                    ),
                    Text(
                      "Text2",
                      style: TextStyle(
                          fontSize: 30.0, backgroundColor: Color(0xFFFFFF00)),
                    ),
                    Text(
                      "Text3",
                      style: TextStyle(
                          fontSize: 20.0, backgroundColor: Color(0xFF00FF00)),
                    ),
                    Text(
                      "Text4",
                      style: TextStyle(
                          fontSize: 10.0, backgroundColor: Color(0xFF0000FF)),
                    ),
                  ],
                ),
                Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.start,
                  verticalDirection: VerticalDirection.up,
                  children: <Widget>[
                    Expanded(
                      flex: 1,
                      child: Container(
                        color: Color(0xFFFF0000),
                        child: Text(
                          "Text1",
                          style: TextStyle(fontSize: 10.0),
                        ),
                      ),
                    ),
                    Expanded(
                      flex: 1,
                      child: Container(
                        color: Color(0xFFFFFF00),
                        child: Text(
                          "Text2",
                          style: TextStyle(fontSize: 20.0),
                        ),
                      ),
                    ),
                    Expanded(
                      flex: 1,
                      child: Container(
                        color: Color(0xFF00FF00),
                        child: Text(
                          "Text3",
                          style: TextStyle(fontSize: 30.0),
                        ),
                      ),
                    ),
                    Expanded(
                      flex: 2,
                      child: Container(
                        color: Color(0xFF0000FF),
                        child: Text(
                          "Text4",
                          style: TextStyle(fontSize: 40.0),
                        ),
                      ),
                    ),
                  ],
                ),
                Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.start,
                  verticalDirection: VerticalDirection.up,
                  children: <Widget>[
                    Expanded(
                      child: Container(
                        color: Color(0xFFFF0000),
                        child: Text(
                          "Text1",
                          style: TextStyle(fontSize: 10.0),
                        ),
                      ),
                    ),
                    Container(
                      color: Color(0xFFFFFF00),
                      child: Text(
                        "Text2",
                        style: TextStyle(fontSize: 20.0),
                      ),
                    ),
                    Container(
                      color: Color(0xFF00FF00),
                      child: Text(
                        "Text3",
                        style: TextStyle(fontSize: 30.0),
                      ),
                    ),
                    Container(
                      color: Color(0xFF0000FF),
                      child: Text(
                        "Text4",
                        style: TextStyle(fontSize: 40.0),
                      ),
                    ),
                  ],
                ),
              ],
            )),
      ),
    );
  }
}

Column 和Row 区别仅在于一个水平布局，一个垂直布局，其他功能一摸一样

不求人Stone

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Flutter学习第三课-布局组件 Row和Column

线性布局所谓线性布局，即指沿水平或垂直方向排布子组件。Flutter中通过Row和Column来实现线性布局。Row 水平布局，Column 垂直布局Row 和 Column 组件是不可以滚动的，所以在 Row 和Column 组件中不会放置过多子组件，如果你需- 要滚动应该使用 ListView。如果只有一个子组件的话，应该考虑使用使用 Align 或者 Container 组件来定位...
复制链接

扫一扫