
Flutter中的Row和Column组件
Row
Row是用于以水平方式显示子组件。Row组件不会滚动。如果您有一行组件,并希望它们在空间不足时能够滚动,请考虑使用ListView。
如果我们希望在一行中显示三个文本组件,我们可以创建一个Row,如下所示:
import 'package:flutter/material.dart';
void main() => runApp(
Center(
child: Container(
color: Colors.blue,
child: Row(
textDirection: TextDirection.ltr,
children: <Widget>[
Container(
color: Colors.orange,
child: FlutterLogo(size: 60.0),
),
Container(
color: Colors.blue,
child: FlutterLogo(
size: 60.0,
),
),
Container(
color: Colors.purple,
child: FlutterLogo(size: 60.0),
)
],
),
)
)
);

Column
Column组件用于垂直显示子组件。Column组件不会滚动。如果您有一行组件,并希望它们在空间不足时能够滚动,请考虑使用ListView。
如果我们希望在一个列中显示三个文本组件,我们可以创建一个如下所示的列组件:
import 'package:flutter/material.dart';
void main() => runApp(
Center(
child: Container(
color: Colors.blue,
child: Column(
textDirection: TextDirection.ltr,
children: <Widget>[
Container(
color: Colors.orange,
child: FlutterLogo(size: 60.0),
),
Container(
color: Colors.blue,
child: FlutterLogo(
size: 60.0,
),
),
Container(
color: Colors.purple,
child: FlutterLogo(size: 60.0),
)
],
),
)
)
);

Column和Row具有相同的属性。因此,在下面的示例中,我们同时使用这两个组件。
什么是行和列中的CrossAxis(交叉轴)?

CrossAxisAlignment属性
我们可以使用crossAxisAlignment属性在所需方向上对齐子组件,例如,crossAxisAlignment.start会将子项的起始边缘与十字轴的起始侧对齐。
import 'package:flutter/material.dart';
void main() => runApp(
Center(
child: Container(
color: Colors.blue,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
textDirection: TextDirection.ltr,
children: <Widget>[
Container(
color: Colors.blue,
width: 50.0,
height: 50.0,
),
Icon(
Icons.adjust,
size: 50.0,
color: Colors.pink,
textDirection: TextDirection.ltr,
),
Icon(
Icons.adjust,
size: 50.0,
color: Colors.purple,
textDirection: TextDirection.ltr,
),
Icon(
Icons.adjust,
size: 50.0,
color: Colors.greenAccent,
textDirection: TextDirection.ltr,
),
Container(
color: Colors.orange,
width: 50.0,
height: 50.0,
),
Icon(
Icons.adjust,
size: 50.0,
color: Colors.cyan,
textDirection: TextDirection.ltr,
),
],
),
)
)
);

import 'package:flutter/material.dart';
void main() => runApp(
Center(
child: Container(
color: Colors.blue,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
textDirection: TextDirection.ltr,
children: <Widget>[
Container(
color: Colors.blue,
width: 50.0,
height: 50.0,
),
Icon(
Icons.adjust,
size: 50.0,
color: Colors.pink,
textDirection: TextDirection.ltr,
),
Icon(
Icons.adjust,
size: 50.0,
color: Colors.purple,
textDirection: TextDirection.ltr,
),
Icon(
Icons.adjust,
size: 50.0,
color: Colors.greenAccent,
textDirection: TextDirection.ltr,
),
Container(
color: Colors.orange,
width: 50.0,
height: 50.0,
),
Icon(
Icons.adjust,
size: 50.0,
color: Colors.cyan,
textDirection: TextDirection.ltr,
),
],
),
)
)
);

CrossAxisAlignment.center
放置子组件,使其中心与十字轴的中心对齐。

CrossAxisAlignment.end
将子组件放置在尽可能靠近横轴末端的位置。

CrossAxisAlignment.baseline
沿交叉轴放置子组件,使其基线匹配对齐。
您应该将TextBaseline Class与CrossAxisAlignment.baseline一起使用。
import 'package:flutter/material.dart';
void main() => runApp(
Container(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
textDirection: TextDirection.ltr,
children: <Widget>[
Text(
'Flutter',
style: TextStyle(color: Colors.yellow, fontSize: 30.0),
textDirection: TextDirection.ltr,
),
Text(
'Flutter',
style: TextStyle(color: Colors.blue, fontSize: 20.0),
textDirection: TextDirection.ltr,
),
],
),
)
);

import 'package:flutter/material.dart';
void main() => runApp(
Container(
child: Row(
crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.alphabetic,
textDirection: TextDirection.ltr,
children: <Widget>[
Text(
'Flutter',
style: TextStyle(color: Colors.yellow, fontSize: 30.0),
textDirection: TextDirection.ltr,
),
Text(
'Flutter',
style: TextStyle(color: Colors.blue, fontSize: 20.0),
textDirection: TextDirection.ltr,
),
],
),
)
);

TextDirection属性
确定水平放置子组件的顺序以及水平方向的开始和结束的位置。
import 'package:flutter/material.dart';
void main() => runApp(
Container(
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
textDirection: TextDirection.rtl,
children: <Widget>[
Text(
'Flutter',
style: TextStyle(color: Colors.yellow, fontSize: 30.0),
textDirection: TextDirection.ltr,
),
Text(
'Flutter',
style: TextStyle(color: Colors.blue, fontSize: 20.0),
textDirection: TextDirection.ltr,
),
],
),
)
);

import 'package:flutter/material.dart';
void main() => runApp(
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
textDirection: TextDirection.rtl,
children: <Widget>[
Text(
'Flutter',
style: TextStyle(color: Colors.yellow, fontSize: 30.0),
textDirection: TextDirection.ltr,
),
Text(
'Flutter',
style: TextStyle(color: Colors.blue, fontSize: 20.0),
textDirection: TextDirection.ltr,
),
],
),
)
);

VerticalDirection属性
确定垂直放置子组件的顺序以及垂直方向的开始和结束位置。
默认为VerticalDirection.down。
import 'package:flutter/material.dart';
void main() => runApp(
Container(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
verticalDirection: VerticalDirection.down,
textDirection: TextDirection.rtl,
children: <Widget>[
Text(
'Flutter',
style: TextStyle(color: Colors.yellow, fontSize: 30.0),
textDirection: TextDirection.ltr,
),
Text(
'Flutter',
style: TextStyle(color: Colors.blue, fontSize: 20.0),
textDirection: TextDirection.ltr,
),
],
),
)
);

import 'package:flutter/material.dart';
void main() => runApp(
Container(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
verticalDirection: VerticalDirection.up,
textDirection: TextDirection.rtl,
children: <Widget>[
Text(
'Flutter',
style: TextStyle(color: Colors.yellow, fontSize: 30.0),
textDirection: TextDirection.ltr,
),
Text(
'Flutter',
style: TextStyle(color: Colors.blue, fontSize: 20.0),
textDirection: TextDirection.ltr,
),
],
),
)
);

主轴在行和列中是什么?

MainAxisAlignment属性
设置子组件在主轴上的位置。
MainAxisAlignment.start
将子组件放置在尽可能靠近主轴起点的位置。

MainAxisAlignment.center
将子组件放置在尽可能靠近主轴中心的位置。

MainAxisAlignment.end
将子组件放置在尽可能靠近主轴末端的位置。

MainAxisAlignment.spaceAround
将自由空间均匀地放在子组件之间,以及第一个子组件和最后一个子组件前后各占一半间隔空间。

MainAxisAlignment.spaceBetween
将空闲空间均匀地放在子组件之间。

MainAxisAlignment.spaceEvenly
将空闲空间均匀地放在子组件之间以及第一个子组件之前和最后一个子组件之后。

MainAxisSize属性
设置主轴上组件的大小。
MainAxisSize.max
根据传入的布局约束,最大化主轴上的可用空间。
import 'package:flutter/material.dart';
void main() => runApp(
Center(
child: Container(
color: Colors.grey,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
textDirection: TextDirection.rtl,
children: <Widget>[
Container(
color: Colors.blue,
width: 50.0,
height: 50.0,
),
Icon(
Icons.adjust,
size: 50.0,
color: Colors.pink,
textDirection: TextDirection.ltr,
),
Icon(
Icons.adjust,
size: 50.0,
color: Colors.purple,
textDirection: TextDirection.ltr,
),
Icon(
Icons.adjust,
size: 50.0,
color: Colors.greenAccent,
textDirection: TextDirection.ltr,
),
Container(
color: Colors.orange,
width: 50.0,
height: 50.0,
),
Icon(
Icons.adjust,
size: 50.0,
color: Colors.cyan,
textDirection: TextDirection.ltr,
),
],
),
),
)
);

import 'package:flutter/material.dart';
void main() => runApp(
Center(
child: Container(
color: Colors.grey,
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
textDirection: TextDirection.rtl,
children: <Widget>[
Container(
color: Colors.blue,
width: 50.0,
height: 50.0,
),
Icon(
Icons.adjust,
size: 50.0,
color: Colors.pink,
textDirection: TextDirection.ltr,
),
Icon(
Icons.adjust,
size: 50.0,
color: Colors.purple,
textDirection: TextDirection.ltr,
),
Icon(
Icons.adjust,
size: 50.0,
color: Colors.greenAccent,
textDirection: TextDirection.ltr,
),
Container(
color: Colors.orange,
width: 50.0,
height: 50.0,
),
Icon(
Icons.adjust,
size: 50.0,
color: Colors.cyan,
textDirection: TextDirection.ltr,
),
],
),
),
)
);

MainAxisSize.min
根据传入的布局约束,将主轴上的可用空间最小化。
import 'package:flutter/material.dart';
void main() => runApp(
Center(
child: Container(
color: Colors.grey,
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
textDirection: TextDirection.rtl,
children: <Widget>[
Container(
color: Colors.blue,
width: 50.0,
height: 50.0,
),
Icon(
Icons.adjust,
size: 50.0,
color: Colors.pink,
textDirection: TextDirection.ltr,
),
Icon(
Icons.adjust,
size: 50.0,
color: Colors.purple,
textDirection: TextDirection.ltr,
),
Icon(
Icons.adjust,
size: 50.0,
color: Colors.greenAccent,
textDirection: TextDirection.ltr,
),
Container(
color: Colors.orange,
width: 50.0,
height: 50.0,
),
Icon(
Icons.adjust,
size: 50.0,
color: Colors.cyan,
textDirection: TextDirection.ltr,
),
],
),
),
)
);

最后
篇幅有限,希望大家能够有所收获!