Flutter 基础组件之 Row、Column

1 Row

Row 是一个可以沿水平方向展示它的子组件的组件。

它还可以灵活布局,如果要让某个子组件填充满剩余剩余空间,请使用 Expanded 组件包裹该组件即可。

Row 组件是不可以滚动的,所以在 Row 组件中一般不会放置过多子组件,如果需要滚动的话应该考虑使用 ListView。

如果需要垂直展示,应该考虑 Column 组件。

如果只有一个子组件的话,应该考虑使用使用 Align 或者 Container 组件来定位这个子组件。

说了这么多,对我来说,Row 就是一个 orientation 为 horizontal 的 LinearLayout。

 

1.1 构造方法

Row({Key key, MainAxisAlignment mainAxisAlignment: MainAxisAlignment.start, MainAxisSize mainAxisSize: MainAxisSize.max, CrossAxisAlignment crossAxisAlignment: CrossAxisAlignment.center, TextDirection textDirection, VerticalDirection verticalDirection: VerticalDirection.down, TextBaseline textBaseline, List children: const [] })

Row 组件只有这一个构造方法,并且也没有什么必传参数,所以说 Row 组件其实是很简单的。

 

1.2 常用属性

crossAxisAlignment:子组件沿着 Cross 轴(在 Row 中是纵轴)如何摆放,其实就是子组件对齐方式,可选值有:
    CrossAxisAlignment.start:子组件在 Row 中顶部对齐。
    CrossAxisAlignment.end:子组件在 Row 中底部对齐。
    CrossAxisAlignment.center:子组件在 Row 中居中对齐。
    CrossAxisAlignment.stretch:拉伸填充满父布局。
    CrossAxisAlignment.baseline:在 Row 组件中会报错。

mainAxisAlignment:子组件沿着 Main 轴(在 Row 中是横轴)如何摆放,其实就是子组件排列方式,可选值有:
    MainAxisAlignment.start:靠左排列。
    MainAxisAlignment.end:靠右排列。
    MainAxisAlignment.center:居中排列。
    MainAxisAlignment.spaceAround:每个子组件左右间隔相等,也就是 margin 相等。
    MainAxisAlignment.spaceBetween:两端对齐,也就是第一个子组件靠左,最后一个子组件靠右,剩余组件在中间平均分散排列。
    MainAxisAlignment.spaceEvenly:每个子组件平均分散排列,也就是宽度相等。

mainAxisSize:Main 轴大小,可选值有:
    MainAxisSize.max:相当于 Android 的 match_parent。
    MainAxisSize.min:相当于 Android 的 wrap_content。

textBaseline:不太理解。

textDirection:子组件排列顺序,可选值有:
    TextDirection.ltr:从左往右开始排列。
    TextDirection.rtl:从右往左开始排列。

verticalDirection:确定如何在垂直方向摆放子组件,以及如何解释 start 和 end,指定 height 可以看到效果,可选值有:
    VerticalDirection.up:Row 从下至上开始摆放子组件,此时我们看到的底部其实是顶部。
    VerticalDirection.down:Row 从上至下开始摆放子组件,此时我们看到的顶部就是顶部。

children:子组件,值是一个 Widget 数组。

 

下面是一个设置了上述属性的 Demo:

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: Row(
            //子组件沿着 Cross 轴(在 Row 中是纵轴)如何摆放,其实就是子组件对齐方式,可选值有:
            //CrossAxisAlignment.start:子组件在 Row 中顶部对齐
            //CrossAxisAlignment.end:子组件在 Row 中底部对齐
            //CrossAxisAlignment.center:子组件在 Row 中居中对齐
            //CrossAxisAlignment.stretch:拉伸填充满父布局
            //CrossAxisAlignment.baseline:在 Row 组件中会报错
            crossAxisAlignment: CrossAxisAlignment.start,
            //子组件沿着 Main 轴(在 Row 中是横轴)如何摆放,其实就是子组件排列方式,可选值有:
            //MainAxisAlignment.start:靠左排列
            //MainAxisAlignment.end:靠右排列
            //MainAxisAlignment.center:居中排列
            //MainAxisAlignment.spaceAround:每个子组件左右间隔相等,也就是 margin 相等
            //MainAxisAlignment.spaceBetween:两端对齐,也就是第一个子组件靠左,最后一个子组件靠右,剩余组件在中间平均分散排列
            //MainAxisAlignment.spaceEvenly:每个子组件平均分散排列,也就是宽度相等
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            //Main 轴大小,可选值有:
            //MainAxisSize.max:相当于 Android 的 match_parent
            //MainAxisSize.min:相当于 Android 的 wrap_content
            mainAxisSize: MainAxisSize.max,
            //不太理解
//            textBaseline: TextBaseline.alphabetic,
            //子组件排列顺序,可选值有:
            //TextDirection.ltr:从左往右开始排列
            //TextDirection.rtl:从右往左开始排列
            textDirection: TextDirection.ltr,
            //确定如何在垂直方向摆放子组件,以及如何解释 start 和 end,指定 height 可以看到效果,可选值有:
            //VerticalDirection.up:Row 从下至上开始摆放子组件,此时我们看到的底部其实是顶部
            //VerticalDirection.down:Row 从上至下开始摆放子组件,此时我们看到的顶部就是顶部
            verticalDirection: VerticalDirection.down,
            children: [
              Container(
                color: Color(0xFFFF0000),
                child: Text(
                  "Text1",
                  style: TextStyle(fontSize: 30.0),
                ),
              ),
              Container(
                color: Color(0xFFFFFF00),
                child: Text(
                  "Text2",
                  style: TextStyle(fontSize: 30.0),
                ),
              ),
              Container(
                color: Color(0xFF00FF00),
                child: Text(
                  "Text3",
                  style: TextStyle(fontSize: 30.0),
                ),
              ),
              Container(
                color: Color(0xFF0000FF),
                child: Text(
                  "Text4",
                  style: TextStyle(fontSize: 30.0),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

 

运行效果如下:

Flutter 基础组件之 Row、Column_第1张图片

 

可以看到的是 4 个子组件的宽度是包裹了文字,有时候我们希望它们能够平分 Row 的宽度,这时候只需要用 Expanded 组件包裹一下子组件就行了:

            children: [
              Expanded(
                  child: Container(
                color: Color(0xFFFF0000),
                child: Text(
                  "Text1",
                  style: TextStyle(fontSize: 30.0),
                ),
              )),
              Expanded(
                  child: Container(
                color: Color(0xFFFFFF00),
                child: Text(
                  "Text2",
                  style: TextStyle(fontSize: 30.0),
                ),
              )),
              Expanded(
                  child: Container(
                color: Color(0xFF00FF00),
                child: Text(
                  "Text3",
                  style: TextStyle(fontSize: 30.0),
                ),
              )),
              Expanded(
                  child: Container(
                color: Color(0xFF0000FF),
                child: Text(
                  "Text4",
                  style: TextStyle(fontSize: 30.0),
                ),
              )),

 

运行效果如下:

Flutter 基础组件之 Row、Column_第2张图片

 

Expanded 组件的使用很简单,除了一个必传的参数 child 以为,还有一个 flex 属性,它就相当于 LinearLayout 中的 weight,默认是 1,如果指定为 2 就表示它包裹的子组件占据的空间为总数的两份,如:

            children: [
              Expanded(
                  child: Container(
                color: Color(0xFFFF0000),
                child: Text(
                  "Text1",
                  style: TextStyle(fontSize: 30.0),
                ),
              )),
              Expanded(
                  child: Container(
                color: Color(0xFFFFFF00),
                child: Text(
                  "Text2",
                  style: TextStyle(fontSize: 30.0),
                ),
              )),
              Expanded(
                  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: 30.0),
                    ),
                  )),
            ],

一共是 4 个子组件,最后一个子组件指定了 flex 为 2,其他没有指定 flex 属性的子组件默认 flex 为 1,1+1+1+2 = 5,总共把 Row 组件的宽度分为 5 份,最后一个子组件的宽度占 5 份中的 2 份,其余子组件各占 5 份中的 1 份:

Flutter 基础组件之 Row、Column_第3张图片

 

2 Column

Column 就相当于一个 orientation 为 vertical 的 LinearLayout。它的用法完全与 Row 一样,可以说会了 Row 组件就会了 Column 组件,所以不详细介绍,将上面 Demo 中的 Row 改为 Column 看看效果:

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(
          child: Column(
            //子组件沿着 Cross 轴(在 Row 中是纵轴)如何摆放,其实就是子组件对齐方式,可选值有:
            //CrossAxisAlignment.start:子组件在 Row 中顶部对齐
            //CrossAxisAlignment.end:子组件在 Row 中底部对齐
            //CrossAxisAlignment.center:子组件在 Row 中居中对齐
            //CrossAxisAlignment.stretch:拉伸填充满父布局
            //CrossAxisAlignment.baseline:在 Row 组件中会报错
            crossAxisAlignment: CrossAxisAlignment.start,
            //子组件沿着 Main 轴(在 Row 中是横轴)如何摆放,其实就是子组件排列方式,可选值有:
            //MainAxisAlignment.start:靠左排列
            //MainAxisAlignment.end:靠右排列
            //MainAxisAlignment.center:居中排列
            //MainAxisAlignment.spaceAround:每个子组件左右间隔相等,也就是 margin 相等
            //MainAxisAlignment.spaceBetween:两端对齐,也就是第一个子组件靠左,最后一个子组件靠右,剩余组件在中间平均分散排列
            //MainAxisAlignment.spaceEvenly:每个子组件平均分散排列,也就是宽度相等
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            //Main 轴大小,可选值有:
            //MainAxisSize.max:相当于 Android 的 match_parent
            //MainAxisSize.min:相当于 Android 的 wrap_content
            mainAxisSize: MainAxisSize.max,
            //不太理解
//            textBaseline: TextBaseline.alphabetic,
            //子组件排列顺序,可选值有:
            //TextDirection.ltr:从左往右开始排列
            //TextDirection.rtl:从右往左开始排列
            textDirection: TextDirection.ltr,
            //确定如何在垂直方向摆放子组件,以及如何解释 start 和 end,指定 height 可以看到效果,可选值有:
            //VerticalDirection.up:Row 从下至上开始摆放子组件,此时我们看到的底部其实是顶部
            //VerticalDirection.down:Row 从上至下开始摆放子组件,此时我们看到的顶部就是顶部
            verticalDirection: VerticalDirection.down,
            children: [
              Expanded(
                  child: Container(
                width: double.infinity,
                color: Color(0xFFFF0000),
                child: Text(
                  "Text1",
                  style: TextStyle(fontSize: 30.0),
                ),
              )),
              Expanded(
                  child: Container(
                width: double.infinity,
                color: Color(0xFFFFFF00),
                child: Text(
                  "Text2",
                  style: TextStyle(fontSize: 30.0),
                ),
              )),
              Expanded(
                  child: Container(
                width: double.infinity,
                color: Color(0xFF00FF00),
                child: Text(
                  "Text3",
                  style: TextStyle(fontSize: 30.0),
                ),
              )),
              Expanded(
                  flex: 2,
                  child: Container(
                    width: double.infinity,
                    color: Color(0xFF0000FF),
                    child: Text(
                      "Text4",
                      style: TextStyle(fontSize: 30.0),
                    ),
                  )),
            ],
          ),
        ),
      ),
    );
  }
}

 

运行效果如下:

Flutter 基础组件之 Row、Column_第4张图片

 

3 总结

Flutter 将 Android 中一个 LinearLayout 横纵向拆成了两个组件,还是觉得怪麻烦的,还好两个组件的属性没有上面区别,我忍了。Row 和 Column 是最基本的布局组件,算是基础中的基础呀。

你可能感兴趣的:(前端)