小常识，大应战！本文正在参加“程序员必备小常识”创造活动。

前言

从上一篇中首要了解了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的模拟器)。

Flutter-常用Widget
从工作结果可以看到文字和按钮的闪现，点击按钮计数会增加。下面我们删掉本来的代码，然后自定义一些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，再工作。

Flutter-常用Widget
假设要设置最大行数，然后剩下的用...的办法，可以设置maxLine和overflow特色。完成后点击Hot reload就可以看到效果了。
Flutter-常用Widget

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稍改一下，然后工作，就完成了简略的富文本效果。

Flutter-常用Widget

Container

再创建一个container_demo.dart文件，回来一个Container的Widget，然后引进到main的body里，我们给Container设置个颜色，工作。

Flutter-常用Widget
可以看到整个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),
          ),
        ],
      ),
    );
  }
}

再次工作。

Flutter-常用Widget
可以看到之前黄色占满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，看一下效果，代码如下：

Flutter-常用Widget
赤色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,
          ),
        ],
      ),
    );
  }
}

接下来工作看一下效果

Flutter-常用Widget
可以看到图标在横向是靠左边的，纵向是中心方位，由于Row是占满横向的，所以关于Row来说alignment设置x轴方向是无效的，相同关于Column设置y轴方向是无效的。

Column

Column是一个纵向布局的Widget，纵向占满屏幕，横向会根据子部件大小自动布局，把上面的代码的Row改成Column，工作。

Flutter-常用Widget

Stack

Stack是一个层叠布局的Widget，从内层忘外层布局，假设各个子部件的大小共同，外层Widget会掩盖内层的Widget，仍是上面的代码，仅仅改成Stack，工作。

Flutter-常用Widget
可以看到只闪现最后面添加的alarm的Icon图标，我们把每个子Widget的大小，这样就更直观一点。
Flutter-常用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效果一样。

Flutter-常用Widget
这时我们把Icon改成Text，并把文字大小设置成不一样，再看效果。
Flutter-常用Widget
可以看到一切文字的底部的对齐的。

  • start: 初步方位对齐。
  • end: 结束方位对齐。
  • stretch: 交叉轴方向占满屏幕。
  • baseline: 需求合作textBaseline运用，文字底部对齐。

Expanded

接下来把之前Row的children内的子部件再嵌套在Expanded里，看一下效果。

Flutter-常用Widget
子控件占满主轴方向，假设主轴方向放不下会自动换行。

  • Expanded: 在主轴方向不会剩下空隙，将被Expanded拉伸。

总结

通过这篇对Flutter常用的Widget做了了解，也在实践工作后看不同Widget对应特色的运用的改变，根据这些Widget的运用做个简略的总结。

  • Text控件的运用，以及RichText富文本控件的运用。
  • Container的用法，Alignment的参数x和y。
  • Row和Column，认识了主轴和交叉轴的概念。
  • Stack的用法，层叠闪现。
  • Expanded，填充Widget，可以占满父组件。