Flutter学习笔记之理解widget树

  • Widget树是我们创建UI的方式,在Flutter中我们经常看到或听到这样一句话:一切皆Widget,Widget地狱嵌套。为了代码更容易理解:尽可能的保持Widget树层级较浅。
    Material Design:Widget树的属性
    Scaffold:脚手架,实现Material可视化布局
    AppBar:界面顶部实现工具栏
    CircleAvatar:显示一张圆形用户资料照片,可用于任何图片
    Divider:绘制一条具有上下边距的水平线
    SingleChildScrollView:可将垂直或水平滚动能力增加到单个子Widget上,防止屏幕溢出,内容过多时不建议使用,影响性能
    Padding:可添加上、下、左、右内边距
    Column:显示子Widget纵向列表
    Row:显示子Widget横向列表
    Container:可用于空白占位符(不可见),也可设置其它属性灵活运用
    Expanded:可填充从属于Column或Row Widget的子Widget可用空间
    Text:界面显示的文本
    Stack:层叠组件、绝对定位
    Positioned:允许设置宽高,与Stack结合使用,指定Stack Widget上、下、左、右四边的定位距离
//引入Material风格库,使用Material风格组件
import 'package:flutter/material.dart';
//创建有状态Widget
class Home extends StatefulWidget {
     
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
     
//创建变量,初始值0
  int _counter = 0;

  @override
  Widget build(BuildContext context) {
     
    return Scaffold(
      appBar: AppBar(
        title: Text('Widget Tree'),
      ),
      body: SafeArea(//SafeArea适配屏幕安全区
        child: SingleChildScrollView(//防止Widget屏幕滚动溢出
          child: Padding(//内边距
            padding: EdgeInsets.all(16.0),//上下左右边距16
            child: Column(//纵向列表,可放置多个子Widget
              children: <Widget>[
                const RowWidget(),//Widget
                Padding(
                  padding: EdgeInsets.all(16.0),
                ),
                const RowAndColumnWidget(),//Widget
                CounterTextWidget(counter: _counter),//Widget
                TextButton(//按扭
                  child: Text('Add to Counter'),
                  //点击事件宣染界面变化值
                  onPressed: () {
     
                    setState(() {
     
                    //回调方法
                      _addToCounter();
                    });
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
//自定义方法函数
  void _addToCounter() {
     
    return setState(() {
     
      _counter++;
    });
  }
}
//构建自定义类Widget
class CounterTextWidget extends StatelessWidget {
     
//使用const关键字得到缓存性能优势 
  const CounterTextWidget({
     
    Key key,
    @required int counter,
  })  : _counter = counter,
        super(key: key);

  final int _counter;

  @override
  Widget build(BuildContext context) {
     
    print('CounterTextWidget $_counter');

    return Text('CounterTextWidget $_counter');
  }
}
//构建类Widget
class RowWidget extends StatelessWidget {
     
  const RowWidget({
     
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
     
    print('RowWidget');

    return Row(
      children: <Widget>[
        Container(
          color: Colors.yellow,
          height: 40.0,
          width: 40.0,
        ),
        Padding(
          padding: EdgeInsets.all(16.0),
        ),
        Expanded(
          child: Container(
            color: Colors.amber,
            height: 40.0,
            width: 40.0,
          ),
        ),
        Padding(
          padding: EdgeInsets.all(16.0),
        ),
        Container(
          color: Colors.brown,
          height: 40.0,
          width: 40.0,
        ),
      ],
    );
  }
}
//构建类Widget
class RowAndColumnWidget extends StatelessWidget {
     
  const RowAndColumnWidget({
     
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
     
    print('RowAndColumnWidget');

    return Row(
      children: <Widget>[
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            Container(
              color: Colors.yellow,
              height: 60.0,
              width: 60.0,
            ),
            Padding(
              padding: EdgeInsets.all(16.0),
            ),
            Container(
              color: Colors.amber,
              height: 40.0,
              width: 40.0,
            ),
            Padding(
              padding: EdgeInsets.all(16.0),
            ),
            Container(
              color: Colors.brown,
              height: 20.0,
              width: 20.0,
            ),
            Divider(),
            //调用RowAndStackWidget
            const RowAndStackWidget(),
            Divider(),
            Text('End of the Line. Date: ${DateTime.now()}'),
          ],
        ),
      ],
    );
  }
}
//构建类Widget
class RowAndStackWidget extends StatelessWidget {
     
  const RowAndStackWidget({
     
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
     
    print('RowAndStackWidget');

    return Row(
      children: <Widget>[
        CircleAvatar(
          backgroundColor: Colors.lightGreen,
          radius: 100.0,
          child: Stack(
            children: <Widget>[
              Container(
                height: 100.0,
                width: 100.0,
                color: Colors.yellow,
              ),
              Container(
                height: 60.0,
                width: 60.0,
                color: Colors.amber,
              ),
              Container(
                height: 40.0,
                width: 40.0,
                color: Colors.brown,
              ),
            ],
          ),
        ),
      ],
    );
  }
}

  • 以上代码使用了类Widget提高代码理解可阅读性
  • 除了用类构建Widget还可以用常量与方法函数构建Widget,注意在使用常量初始化时Widget会依赖父Widget的BuildContext对象,每次重绘父Widget,常量也会重绘,因此无进行性能优化,所以不推荐使用,方法函数Widget同理,下面我看一下常量widget与方法函数Widget的写法:
//常量Widget
final container = Container(
	conlor:Colors.Blue,
	height:40,
	width:40);
//方法Widget
Widget _buildContainer(){
     
	return Container(
		color:Colors.Blue,
		height:40,
		width:40,
	);
   }

你可能感兴趣的:(Flutter,flutter)