小常识，大应战！本文正在参加“程序员必备小常识”创造活动。
前言
从上一篇中首要了解了Flutter环境的建立，以及ListView的简略运用，这篇中将继续熟悉一下其他的一些Widget。
工程创建
首要创建一个工程，这儿可以通过Android Studio或者命令行创建，进入到工程的目录路径，命令行如下：
# -i：iOS
# objc：挑选Objective-C语言，这儿不挑选语言，iOS默许是Swift，Android默许的是Kotlin
flutter create -i objc flutter_demo
创建工程今后会在lib/main.dart默许生成一些简略的UI样式，工作看一下效果(这儿翻开的是iPhone的模拟器)。
Widget玩玩，看看效果，为了使代码不要太乱，下面一个Widget创建一个dart文件分隔。
常用Widget
在lib文件目录下再创建一个views目录。删掉之前的代码，下面是main.dart的代码。
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Flutter Demo'),
),
body: Container(),
),
);
}
}
Text
创建一个StatelessWidget的text_widget.dart文件放在views里，首要看一下Text的一些特色。
const Text(
String this.data, {
Key? key,
this.style,
this.strutStyle,
this.textAlign,
this.textDirection,
this.locale,
this.softWrap,
this.overflow,
this.textScaleFactor,
this.maxLines,
this.semanticsLabel,
this.textWidthBasis,
this.textHeightBehavior,
})
可以对Text设置样式，对齐办法，文字方向，最大行数等等。可以简略的设置一些特色
import 'package:flutter/material.dart';
class TextWidget extends StatelessWidget {
const TextWidget({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const Text(
'Flutter 是 Google 发布的一个用于创建跨途径、高性能移动运用的结构。Flutter 和 Qt mobile 一样，都没有运用原生控件，相反都完成了一个自绘引擎，运用本身的布局、制作系统。',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 16.0,
color: Colors.red,
),
);
}
}
把main.dart的Container替换刚创建的TextWidget，再工作。
...的办法，可以设置maxLine和overflow特色。完成后点击Hot reload就可以看到效果了。
RichText
在文本样式里经常会用到富文本，Flutter中供给了富文本的Widget就是RichText，看看RichText的特色定义
RichText({
Key? key,
required this.text,
this.textAlign = TextAlign.start,
this.textDirection,
this.softWrap = true,
this.overflow = TextOverflow.clip,
this.textScaleFactor = 1.0,
this.maxLines,
this.locale,
this.strutStyle,
this.textWidthBasis = TextWidthBasis.parent,
this.textHeightBehavior,
})
要求传的text这儿传TextSpan，TextSpan和Text的区别是有children特色，所以可以做嵌套，这样就是可以对文本设置不同的样式。
const TextSpan({
this.text,
this.children,
TextStyle? style,
this.recognizer,
MouseCursor? mouseCursor,
this.onEnter,
this.onExit,
this.semanticsLabel,
this.locale,
this.spellOut,
})
把之前的代码用RichText里嵌套TextSpan稍改一下，然后工作，就完成了简略的富文本效果。
Container
再创建一个container_demo.dart文件，回来一个Container的Widget，然后引进到main的body里，我们给Container设置个颜色，工作。
body被Container占满，它是个弹性布局，我们在Container里面放个Row，然后再嵌套个Icon，代码如下：
import 'package:flutter/material.dart';
class ContainerDemo extends StatelessWidget {
const ContainerDemo({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
color: Colors.yellow,
child: Row(
children: [
Container(
color: Colors.red,
child: const Icon(Icons.add),
),
],
),
);
}
}
再次工作。
body的Container变小了，所以假设Container不设置宽度和高度会遭到子部件的大小影响。接着看一下Container的特色：
Container({
Key? key,
this.alignment,
this.padding,
this.color,
this.decoration,
this.foregroundDecoration,
double? width,
double? height,
BoxConstraints? constraints,
this.margin,
this.transform,
this.transformAlignment,
this.child,
this.clipBehavior = Clip.none,
})
margin & padding
在上面的代码中再设置一下padding和margin，看一下效果，代码如下：
Container到加号图标的距离是30，也就是内边距padding特色，赤色Container到黄色的距离是20，也就是外边距margin特色。
alignment
上面的Container内嵌套了Row，Row是横向占满屏幕的，现在删去之前的Row，在Container内放一个Text，然后设置它的alignment(值的规划是从-1~1)，再次工作看一下效果。通过alignment可以设置元素的坐标点。
Row
Row是一个横向布局的Widget，横向会占满屏幕，纵向会根据子部件的大小弹性布局，接下来再创建一个row_demo.dart，在Row里放置3个Icon，也设置alignment为(0, 0)，代码如下：
import 'package:flutter/material.dart';
class RowDemo extends StatelessWidget {
const RowDemo({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
alignment: const Alignment(0, 0),
color: Colors.yellow,
child: Row(
children: [
Container(
child: const Icon(Icons.add, size: 45,),
color: Colors.red,
),
Container(
child: const Icon(Icons.ac_unit, size: 45,),
color: Colors.blue,
),
Container(
child: const Icon(Icons.access_alarm, size: 45,),
color: Colors.white,
),
],
),
);
}
}
接下来工作看一下效果
Row是占满横向的，所以关于Row来说alignment设置x轴方向是无效的，相同关于Column设置y轴方向是无效的。
Column
Column是一个纵向布局的Widget，纵向占满屏幕，横向会根据子部件大小自动布局，把上面的代码的Row改成Column，工作。
Stack
Stack是一个层叠布局的Widget，从内层忘外层布局，假设各个子部件的大小共同，外层Widget会掩盖内层的Widget，仍是上面的代码，仅仅改成Stack，工作。
alarm的Icon图标，我们把每个子Widget的大小，这样就更直观一点。
Stack的子部件是堆叠闪现的。
主轴和交叉轴
Row、Column和Stack都有主轴和交叉轴的概念，也就是mainAxisAlignment和crossAxisAlignment特色，横向布局主轴方向是往右的，纵向布局主轴方向是往下的，层叠布局主轴方向是往外的，交叉轴是主轴的垂直方向。
mainAxisAlignment
先看一下MainAxisAlignment的定义。
enum MainAxisAlignment {
start,
end,
center,
spaceBetween,
spaceAround,
spaceEvenly,
}
前三个很好了解，start是默许的从初步方向，end是从结束方向初步，center是中心方位。我们以Row作为比如，分别在这3种办法工作看看效果。下面再看一下spaceBetween、spaceAround、spaceEvenly的效果都是什么样的？根据工作效果可以看到：
spaceBetween: 剩下的空间均匀分布到小部件之间。spaceAround: 剩下的空间均匀分布到小部件周围。spaceEvenly: 剩下的空间和小部件一起均匀分。
crossAxisAlignment
看一下CrossAxisAlignment的定义。
enum CrossAxisAlignment {
start,
end,
stretch,
baseline,
}
直接加上crossAxisAlignment相关特色工作看一下效果。前3个特色工作都正常，但改为baseline工作报错了，这儿baseline特色要合作Row组件的textBaseline特色运用，代码如下：
Widget build(BuildContext context) {
return Container(
alignment: const Alignment(0, 0),
color: Colors.yellow,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.alphabetic,
children: [
Container(
child: const Icon(Icons.add, size: 120,),
color: Colors.red,
),
Container(
child: const Icon(Icons.ac_unit, size: 60,),
color: Colors.blue,
),
Container(
child: const Icon(Icons.access_alarm, size: 30,),
color: Colors.white,
),
],
),
);
}
再次工作，可以看到和end效果一样。
Icon改成Text，并把文字大小设置成不一样，再看效果。
start: 初步方位对齐。end: 结束方位对齐。stretch: 交叉轴方向占满屏幕。baseline: 需求合作textBaseline运用，文字底部对齐。
Expanded
接下来把之前Row的children内的子部件再嵌套在Expanded里，看一下效果。
Expanded: 在主轴方向不会剩下空隙，将被Expanded拉伸。
总结
通过这篇对Flutter常用的Widget做了了解，也在实践工作后看不同Widget对应特色的运用的改变，根据这些Widget的运用做个简略的总结。
-
Text控件的运用，以及RichText富文本控件的运用。 -
Container的用法，Alignment的参数x和y。 -
Row和Column，认识了主轴和交叉轴的概念。 -
Stack的用法，层叠闪现。 -
Expanded，填充Widget，可以占满父组件。
