5、Flutter - 控件基础（三）布局

程序员文章站 2022-05-29 20:24:52

...

Flutter - 控件基础（三）布局

上篇补充

final 是运行时赋值之后不可变
const 是常量

布局代码详细代码参见Demo

Demo地址 -> flutter_testdemo1

1、控件显示

对应Demo中 base_widget.dart

1.1、纯文本显示

import 'package:flutter/material.dart';

// -----------------  文本 -----------------
class TextDemo extends StatelessWidget {
  final TextStyle _textStyle = TextStyle(
    fontSize: 16.0,
  );

  final String _title = '一些测试的数据，就是为了试一下效果';
  final String _autor = 'liujilou';

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text(
        '<${_title}> -- $_autor 对于有可变状态控件的管理，官方文档是写了有3种模式：控件自己管理状态、交给父控件管理状态以及混合管理。我个人初学对于自己管理比较好理解，对于父控件管理理解起来有点困难，所以只能多看多学。这里写一下两种状态管理的方式和代码，加深自己的印象，尤其是父控件管理方式。',
        textAlign: TextAlign.center, //文字靠那边显示，居中
        style: _textStyle,
        maxLines: 4, //最多几行
        overflow: TextOverflow.ellipsis, //显示省略号
      ),
    );
  }
}

5、Flutter - 控件基础（三）布局

${_title} $_autor 用以显示变量内容

1.2、富文本显示

// -----------------  富文本 -----------------
class RichTextDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RichText(
      text: TextSpan(
        text: '富文本的显示',
        style: TextStyle(fontSize: 30, color: Colors.black),
        children: <TextSpan>[
          TextSpan(
              text: '--',
              style: TextStyle(
                fontSize: 20,
                color: Colors.red,
              )),
          TextSpan(
              text: 'liujilou',
              style: TextStyle(
                fontSize: 16,
                color: Colors.blue,
              ))
        ],
      ),
    );
  }
}

富文本的显示 TextSpan 可是用来多层的嵌套

RichText(
  text: TextSpan(

1.3、部件显示

// -----------------  控件大小 -----------------
class ContainerDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.yellow,
      child: Row(
        children: <Widget>[
          Container(
            color: Colors.red,
            child: Icon(
              Icons.add,
            ))
        ],
      ));
  }
}

如果容器中只设置了颜色，但是没有给大小的话，是不会显示的，因为大小是自适应，没有东西就不显示的。
加上 child: Icon(Icons.add), 的话显示的就是这个icon 的大小

Container(
    color: Colors.red,
//   child: Icon(Icons.add),
 )

1.3.1、如上代码打开注释

5、Flutter - 控件基础（三）布局

1.3.2、设置宽高，可以发现

height: 200,
width: 200,

5、Flutter - 控件基础（三）布局

1.3.3、如果不设置宽高设置 icon 的大小

child: Icon(
  Icons.add,
  size: 45,
),

5、Flutter - 控件基础（三）布局

1.3.4、设置外边距

margin: EdgeInsets.all(20),

5、Flutter - 控件基础（三）布局

1.3.5、设置内边距

//padding: EdgeInsets.fromLTRB(30, 30, 30, 30),
padding: EdgeInsets.all(30),//同上效果

5、Flutter - 控件基础（三）布局

// -----------------  控件大小 -----------------
class ContainerDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.yellow,
      child: Row(
        children: <Widget>[
          Container(
            color: Colors.red,
            child: Icon(
              Icons.add,
              size: 45,
            ),
//            padding: EdgeInsets.fromLTRB(30, 30, 30, 30),
//            padding: EdgeInsets.all(30),//同上效果
            margin: EdgeInsets.all(20),
            height: 200,
            width: 200,
          )
        ],
      ),
    );
  }
}

2、布局

对应Demo 中的 layout_demo.dart

2.1、居中

Container(

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.yellow,
      child: Center(
        child: Text('Layout_demo'),
      ));
  }
}

或者

return Container(
      color: Colors.yellow,
      alignment: Alignment(0.0, 0.0),
      child:Text('Layout_demo')
);

5、Flutter - 控件基础（三）布局

alignment: Alignment(-1, -1),

5、Flutter - 控件基础（三）布局

Alignment 里面是 double 类型
相对于父类部件的位置

(-1.0，-1.0) 是左上角
(0.0，0.0) 是中间
(1.0，1.0) 是右下角

2.1、横向、纵向、叠加

布局经常会用的
Row 横向布局
Column 纵向布局
Stack 叠加

以Row 为例，纵向和叠加不再演示

return Container(
  color: Colors.yellow,
  alignment: Alignment(-1, -1),//Row 相对于 Container 的位置
  child: Row(
    children: <Widget>[
      Container(
        color: Colors.red,
        child: Icon(Icons.add, size: 60),
      ),
      Container(
        color: Colors.blue,
        child: Icon(Icons.ac_unit, size: 60),
      ),
      Container(
        color: Colors.green,
        child: Icon(Icons.access_alarms, size: 60),
      )
    ],
  ),

5、Flutter - 控件基础（三）布局

2.1.1、主轴方向
mainAxisAlignment: MainAxisAlignment.end,

child: Row(
  mainAxisAlignment: MainAxisAlignment.end,
  children: <Widget>[];

以Row 为例注释，Column 是考上、居中等可以自己试一下
enum MainAxisAlignment {
start,                          //靠左
end,                            //靠右
center,                      //居中
spaceBetween,   //剩下的空间平均分布小部件之间
spaceAround,       // 剩下的空间平均分布小部件周围
spaceEvenly,        //小部件与剩下的空间一起平均分布
}

1、spaceBetween, //剩下的空间平均分布小部件之间

5、Flutter - 控件基础（三）布局

2、spaceAround, // 剩下的空间平均分布小部件周围

5、Flutter - 控件基础（三）布局
3、spaceEvenly, //小部件与剩下的空间一起平均分布

5、Flutter - 控件基础（三）布局

2.1.2、交叉轴方向

crossAxisAlignment: CrossAxisAlignment.start,

return Container(
  color: Colors.yellow,
  alignment: Alignment(-1, -1),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Container(
        color: Colors.red,
        child: Icon(Icons.add, size: 30),
      ),
      Container(
        color: Colors.blue,
        child: Icon(Icons.ac_unit, size: 60),
      ),
      Container(
        color: Colors.green,
        child: Icon(Icons.access_alarms, size: 120),
      )
    ],
  ),

以Row 为例
enum CrossAxisAlignment {
start,            //上边对齐
end,              //下边对齐
center,       //y轴中心对齐
stretch,      //拉伸对齐
baseline,   //字符对齐，这个必须要设置 textBaseline，否者报错
}

1、end

5、Flutter - 控件基础（三）布局

2、stretch, //拉伸对齐

5、Flutter - 控件基础（三）布局

3、baseline, //字符对齐，这个必须要设置 textBaseline，否者报错

以文字的下边对齐的
textBaseline: TextBaseline.alphabetic,
// alphabetic //英文字符对齐
// ideographic //中文字符对齐

将icon 改成 Text

字符对齐，是以字符下边对齐的，跟部件大小没有关系

5、Flutter - 控件基础（三）布局

2.1.3、填充布局
Expanded(
child:
会把部件之间的空隙给填充满。

当然了，如果用填充布局的话主轴的布局设置就完全没有意义了。

return Container(
      color: Colors.yellow,
      alignment: Alignment(-1, -1),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.baseline,
        textBaseline: TextBaseline.alphabetic,
//        alphabetic  //英文字符
//        ideographic //中文字符
        children: <Widget>[
          Expanded(
              	child: Container(
            	height: 80,
            	color: Colors.red,
            	child: Text('test1', style: TextStyle(fontSize: 16)),
          )),
	Expanded(
    		child: Container(
  		height: 80,
 		 color: Colors.blue,
  		child: Text('test1', style: TextStyle(fontSize: 26)),
	)),
	Expanded(
    		child: Container(
  		height: 80,
  		color: Colors.green,
  		child: Text('test1', style: TextStyle(fontSize: 36)),
	)),

5、Flutter - 控件基础（三）布局

2.2、Stack 布局

2.2.1、Positioned
Positioned( 相对布局，相对的是Stack 的大小，例如如下代码，Stack 的大小就是最大的红色矩形200 * 200
绿色矩形设置大小，同时有设置了top 和 bottom ，这个时候 top 和 bottom 的优先级更高，图形拉伸

class StackDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment(-1, -1),
      children: <Widget>[
        Positioned(
//          right: 0,
          child: Container(
            color: Colors.red,
            width: 200,
            height: 200,
            child: Icon(Icons.add),
          ),
        ),
        Positioned(
            right: 0,
            top: 10,
            child: Container(
              color: Colors.blue,
              width: 100,
              height: 100,
              child: Icon(Icons.search),
            )),
        Positioned(
            left: 0,
            top: 10,
            bottom: 10,
            child: Container(
              color: Colors.green,
              width: 50,
              height: 50,
              child: Icon(Icons.assessment),
            )),
      ],
    );
  }
}

5、Flutter - 控件基础（三）布局

2.2.2、宽高比

AspectRatio 宽高比，注意宽和高至少要设置一个

class AspectDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      width: 100,
//      height: 100,
      child: AspectRatio(
        aspectRatio: 2 / 1,
        child: Icon(
          Icons.add,
          size: 30,
        ),
      ),
    );
  }
}

5、Flutter - 控件基础（三）布局

5、Flutter - 控件基础（三）布局

Flutter - 控件基础（三）布局

1、控件显示

1.1、纯文本显示

1.2、富文本显示

1.3、部件显示

2、布局

2.1、居中

2.1、横向、纵向、叠加

2.2、Stack 布局

Flutter学习之构建、布局及绘制三部曲

HTML5基础-新增标签+新增属性+布局案例

Flutter 布局（三）- FittedBox、AspectRatio、ConstrainedBox详解

三星S20系列基础版配置爆料最少12GB LPDDR5起步！

三星“跟风”布局人工智能 5亿信息泄露让雅虎深陷“蝴蝶效应”

HTML5基础-新增标签+新增属性+布局案例

Android基础-四种基本布局和自定义控件的步骤

HTML5 基础（2）—— 网页布局的改变、标签属性的变化

Flutter 布局控件完结篇

Flutter学习之构建、布局及绘制三部曲

5、Flutter - 控件基础（三）布局

Flutter - 控件基础（三）布局

1、控件显示

1.1、纯文本显示

1.2、富文本显示

1.3、部件显示

2、布局

2.1、居中

2.1、横向、纵向、叠加

2.2、Stack 布局

Flutter学习之构建、布局及绘制三部曲

HTML5基础-新增标签+新增属性+布局案例

Flutter 布局（三）- FittedBox、AspectRatio、ConstrainedBox详解

三星S20系列基础版配置爆料 最少12GB LPDDR5起步！

三星“跟风”布局人工智能 5亿信息泄露让雅虎深陷“蝴蝶效应”

HTML5基础-新增标签+新增属性+布局案例

Android基础-四种基本布局和自定义控件的步骤

HTML5 基础（2）—— 网页布局的改变、标签属性的变化

Flutter 布局控件完结篇

Flutter学习之构建、布局及绘制三部曲

三星S20系列基础版配置爆料最少12GB LPDDR5起步！