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

·  阅读 1095
常用 Widget 部件介绍及 Flutter 布局方式

这是我参与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,
    );
  }
}
复制代码

image.png

  • 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,
              ),
            ),
          ]
      ),
    );
  }
}
复制代码

image.png

RichTexttextTextSpan 类型,在 TextSpan 中可以添加 childrenchildren 是一个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,
          ),
        ],
      ),
    );
  }
复制代码

image.png

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

alignment

const Alignment(this.x, this.y)
    : assert(x != null),
      assert(y != null);
复制代码

Container 有一个重要的属性 alignment xy 分别代表子控件在当前 Container 中的位置,x-101、分别代表子控件居左、居中、居右。y-101、分别代表子控件居上、居中、居下。

Flutter 布局方式

Flutter 的布局方式中有三个比较重要的子部件,RowColumnStack 分别代表横向、纵向、多层,分别相当于坐标轴的 xyz 轴。

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,)),
        ],
      ),
    );
  }
}
复制代码

image.png

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,)),
        ],
      ),
    );
  }
}
复制代码

image.png

mainAxisAlignment 代表主轴的开始方向,Row 默认从左往右布局,当把 mainAxisAlignment 设置为 MainAxisAlignment.end 的时候就是从右向左布局,代表从结束位置开始。当布局方式为 Row 的时候,Alignmentx 属性对水平方向不起作用。

image.png

mainAxisAlignment: MainAxisAlignment.spaceBetween

  • spaceBetween:代表子控件在主轴方向排列,剩下的空间平均分布到子控件之间。

image.png

mainAxisAlignment: MainAxisAlignment.spaceAround

  • spaceAround:剩下的空间平均分布到子控件周围。

image.png

mainAxisAlignment: MainAxisAlignment.spaceEvenly

  • spaceEvenly:剩下的空间在子部件中间及子部件到屏幕边缘平均分配。

crossAxisAlignment 交叉轴布局

交叉轴就是主轴的垂直方向,Row 部件的交叉轴就是纵向。相对的其他方向的布局也是类似。

image.png

crossAxisAlignment: CrossAxisAlignment.start

  • CrossAxisAlignment.start: 点子控件在交叉轴方向都从内容顶部开始向下布局。

image.png

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))),
        ],
      ),
    );
  }
}
复制代码

crossAxisAlignmentCrossAxisAlignment.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)))),
        ],
      ),
    );
  }
}
复制代码

image.png

通过上图可以看到,被 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)),
        ],
      ),
    );
  }
}
复制代码

image.png

通过 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,),
        ],
复制代码

image.png

当使用 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))
      ),
    );
  }
}
复制代码

image.png

Container 可以设置一个 AspectRatio 的子部件来影响当前 Container 控件的宽高比,当我们把高度设置为 200 的时候,控件的宽度会被自动设置为 100

分类:
iOS
标签:
收藏成功!
已添加到「」, 点击更改