Flutter:Widget的理解和使用

一、什么是Widget?

简单一句话,在Flutter里,万物都是Widget(部件)。不管是基础“控件”、页面布局、容器组件还是处理事件、各种属性,都是一个个Widget组合或者组成的,很像搭积木,最后所搭成的对象也都是一个Widget。

二、入口函数

dart语法中,函数体内只有一行函数,可以用箭头函数。

void main() => runApp(Myapp());

Myapp():是一个实例对象,把new省略了,在这里也是一个Widget。

三、StatelessWidget

StatelessWidget(无状态部件),简单点说就是不需要维护它的状态,写的什么,就展示什么,不会发生改变。例如,页面中的标题,不会发生改变。

编写一个无状态的Widget,需要继承StatelessWidget。关于无状态部件,固定写法:重写build方法,返回Widget组件。

关于构建Widget的上下文环境BuildContext详解

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo', // app名称
      theme: ThemeData( 
        primarySwatch: Colors.blue, // 主题色
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'), // 应用首页  
    );
  }
}

StatelessWidget 生命周期十分简单,只有build()。

四、StatefulWidget

StatefulWidget(有状态部件),简单点说就是会发生状态改变的组件,如果学过Vue,可以理解为可以响应式变量。

编写一个有状态的Widget,需要继承StatefulWidget。关于有状态部件,固定写法:一个StatefulWidget类,需要对应一个State类。

class CounterWidget extends StatefulWidget {
  final int initValue;

  const CounterWidget({this.initValue = 0,super.key}); //构造函数

  @override
  _CounterWidgetState createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _counter = 0;

  @override
  void initState() {
    super.initState();
    //初始化状态
    _counter = widget.initValue;
    print("initState");
  }

  @override
  Widget build(BuildContext context) {
    print("build");
    return Scaffold(
      body: Center(
        child: TextButton(
          child: Text('$_counter'),
          //点击后计数器自增
          onPressed: () => setState(
            () => ++_counter,
          ),
        ),
      ),
    );
  }

StatefulWidget 生命周期详解

五、关于Key

在Widget中的构造函数,经常出现Key?到底有什么用?——关于key值详解

除非注明,否则均为呆小猴博客原创文章,转载必须以链接形式标明本文链接!付费资源为虚拟物品,一经出售,概不退款!
呆小猴 » Flutter:Widget的理解和使用

发表回复

呆小猴 · 专注安全学习与分享

关于作者 联系作者