这是我参加11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战

文本控件 Text

class TextDemo extends StatelessWidget {
  final TextStyle _textStyle = TextStyle(
    fontSize: 16.0,
    color: Colors.red,
  );
  final String _lector = 'Flutter';
  final String _title = 'Dark 语法详解';
  @override
  Widget build(BuildContext context) {
    return Text(
      '$_lector -- $_title：Flutter中文网是中国最大的Flutter开发者交流学习渠道,致力于打造Flutter开发中文社区。在这里能轻松找到代码实例、项目事例、并有专人提供最新文档翻译。',
      textAlign: TextAlign.center,
      style: _textStyle,
      maxLines: 3,
      overflow: TextOverflow.ellipsis,
    );
  }
}

TextStyle：为文字设置字号、颜色、字体款式等。

$变量：能够经过 $变量 的形式对字符串进行拼接。

textAlign：设置文字居中还是居左或许居右。

maxLines：设置文字最大显现行号。

overflow：显现不完时文字的截取方法。

可变文本控件 RichText

class RichTextDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RichText(
      text: const TextSpan(
          text: 'Flutter',
          style: TextStyle(
            fontSize: 30,
            color: Colors.black,
          ),
          children: [
            TextSpan(
              text: '中文网',
              style: TextStyle(
                fontSize: 16,
                color: Colors.red,
              ),
            ),
            TextSpan(
              text: '是中国最大的Flutter开发者交流学习渠道',
              style: TextStyle(
                fontSize: 20,
                color: Colors.blue,
              ),
            ),
          ]
      ),
    );
  }
}

RichText 中 text 是 TextSpan 类型，在 TextSpan 中能够添加 children，children 是一个TextSpan 类型的 List。我们能够在每个 TextSpan 中单独设置要展现的文字及文字款式 style。终究展现的时分便是每个 TextSpan 中文字拼接起来的效果。能够做富文本展现。

Container

class ContainerDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
      child: Row(
        children: <Widget>[
          Container(
            color: Colors.yellow,
            child: Icon(
              Icons.add,
              size: 45,
            ),
            padding: EdgeInsets.all(30),
            margin: EdgeInsets.all(20),
            height: 230,
          ),
        ],
      ),
    );
  }

Container 有点类型我们 iOS 中的 UIView 控件，Container 没设置宽高的情况下，Container 的巨细由内部子控件撑起。padding 是内边距，margin 是外边距。

alignment

const Alignment(this.x, this.y)
    : assert(x != null),
      assert(y != null);

Container 有一个重要的特点 alignment ，x 与 y 别离代表子控件在当前 Container 中的方位，x 为 -1、0、1、别离代表子控件居左、居中、居右。y 为 -1、0、1、别离代表子控件居上、居中、居下。

Flutter 布局方法

Flutter 的布局方法中有三个比较重要的子部件，Row、Column、Stack 别离代表横向、纵向、多层，别离相当于坐标轴的 x、y、z 轴。

Column

class LayoutColumnDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.greenAccent,
      alignment: Alignment(0.0, 0.0),
      child: Column(
        children: [
          Container(color: Colors.red, child: Icon(Icons.add, size: 90,)),
          Container(color: Colors.yellow, child: Icon(Icons.timelapse, size: 60,)),
          Container(color: Colors.blue, child: Icon(Icons.error, size: 30,)),
        ],
      ),
    );
  }
}

Row

class LayoutRowDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.greenAccent,
      alignment: Alignment(1.0, 0.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          Container(color: Colors.red, child: Icon(Icons.add, size: 90,)),
          Container(color: Colors.yellow, child: Icon(Icons.timelapse, size: 60,)),
          Container(color: Colors.blue, child: Icon(Icons.error, size: 30,)),
        ],
      ),
    );
  }
}

mainAxisAlignment 代表主轴的开端方向，Row 默许从左往右布局，当把 mainAxisAlignment 设置为 MainAxisAlignment.end 的时分便是从右向左布局，代表从结束方位开端。当布局方法为 Row 的时分，Alignment 的 x 特点对水平方向不起作用。

mainAxisAlignment: MainAxisAlignment.spaceBetween

spaceBetween：代表子控件在主轴方向摆放，剩余的空间均匀散布到子控件之间。

mainAxisAlignment: MainAxisAlignment.spaceAround

spaceAround：剩余的空间均匀散布到子控件周围。

mainAxisAlignment: MainAxisAlignment.spaceEvenly

spaceEvenly：剩余的空间在子部件中心及子部件到屏幕边缘均匀分配。

crossAxisAlignment 穿插轴布局

穿插轴便是主轴的垂直方向，Row 部件的穿插轴便是纵向。相对的其他方向的布局也是类似。

crossAxisAlignment: CrossAxisAlignment.start

CrossAxisAlignment.start: 点子控件在穿插轴方向都从内容顶部开端向下布局。

class LayoutRowDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.greenAccent,
      alignment: Alignment(1.0, 0.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.baseline,
        textBaseline: TextBaseline.alphabetic,
        children: [
          Container(color: Colors.red, child: Text('Hello', style: TextStyle(fontSize: 15))),
          Container(color: Colors.yellow, child: Text('Flutter', style: TextStyle(fontSize: 30))),
          Container(color: Colors.blue, child: Text('Demo', style: TextStyle(fontSize: 60))),
        ],
      ),
    );
  }
}

当 crossAxisAlignment 为 CrossAxisAlignment.baseline 的时分有必要跟 textBaseline 特点一起运用，用来设置文本的基准线的对齐方法。

Expanded

class LayoutExpandedDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.greenAccent,
      alignment: Alignment(1.0, 0.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.baseline,
        textBaseline: TextBaseline.alphabetic,
        children: [
          Expanded(child: Container(color: Colors.red, child: Text('Hello', style: TextStyle(fontSize: 15)))),
          Expanded(child: Container(color: Colors.yellow, child: Text('Flutter', style: TextStyle(fontSize: 30)))),
          Expanded(child: Container(color: Colors.blue, child: Text('Demo', style: TextStyle(fontSize: 60)))),
        ],
      ),
    );
  }
}

经过上图能够看到，被 Expanded 包装的子控件会在主轴方向按屏幕的巨细等分。当主轴方向为横向的时分设置子控件的宽度就不会起作用。相同，当主轴方向为纵向的时分设置子控件的高度就不会起作用。

Stack

class LayoutStackDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.greenAccent,
      alignment: const Alignment(0, 0),
      child: Stack(
        children: [
          Container(color: Colors.red, width: 200, height: 200, child: Icon(Icons.add)),
          Container(color: Colors.yellow, width: 100, height: 100, child: Icon(Icons.timelapse)),
          Container(color: Colors.blue, width: 50, height: 50, child: Icon(Icons.error)),
        ],
      ),
    );
  }
}

经过 Stack 布局，Container 中的子控件会由内向外按次序叠加展现。

Positioned

children: [
          Positioned(child: Container(color: Colors.red, width: 200, height: 200, child: Icon(Icons.add))),
          Positioned(child: Container(color: Colors.yellow, width: 100, height: 100, child: Icon(Icons.timelapse)),left: 5,),
          Positioned(child: Container(color: Colors.blue, width: 50, height: 50, child: Icon(Icons.error)),right: 10,),
        ],

当运用 Positioned 的时分，能够设置 left 或许 right 等特点， left 或许 right 的值为 double 类型，能够设置子部件距离父控件的左边或许右边的距离。

AspectRatio

class LayoutAspectRatioDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.greenAccent,
      alignment: const Alignment(0, 0),
      child: Container(
        color: Colors.blue,
        height: 200,
          child: const AspectRatio(aspectRatio: 1 / 2, child: Icon(Icons.add))
      ),
    );
  }
}

Container 能够设置一个 AspectRatio 的子部件来影响当前 Container 控件的宽高比，当我们把高度设置为 200 的时分，控件的宽度会被自动设置为 100。

常用 Widget 部件介绍及 Flutter 布局方式

文本控件 Text

可变文本控件 RichText

Container

alignment

Flutter 布局方法

Column

Row

crossAxisAlignment 穿插轴布局

Expanded

Stack

Positioned

AspectRatio

作者信息

常用 Widget 部件介绍及 Flutter 布局方式

文本控件 Text

可变文本控件 RichText

Container

alignment

Flutter 布局方法

Column

Row

crossAxisAlignment 穿插轴布局

Expanded

Stack

Positioned

AspectRatio

相关文章

高级UI——Paint(Xfermode)

项目管理工具｜10个有效的工作习惯，成功的例子和技巧

ChatGPT强势加入芯片设计！不用学专业硬件描述语言了，说人话就行

15分钟入门23种设计模式：图解，范例和对比

作者信息