Flutter

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

2021-11-14  本文已影响0人  晨曦的简书

文本控件 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

mainAxisAlignment: MainAxisAlignment.spaceAround

mainAxisAlignment: MainAxisAlignment.spaceEvenly

crossAxisAlignment 交叉轴布局

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

crossAxisAlignment: 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。

上一篇下一篇

猜你喜欢

热点阅读