Flutter学习13 - Widget

1、Flutter中常用 Widget

2、StatelessWidget 和 StateFulWidget

• Flutter 中的 widget 有很多，但主要分两种：

2.1、StatelessWidget

• Text、AboutDialog、CircleAvatar 等都是 StatelessWidget 的子类

无状态 widget 通常会在 3 种情况下使用：

(1) 将 widget 插入树中时
(2) 当 widget 的父级更改配置时
(3) 当它依赖的 InheritedWidget 发生改变时

代码示例

//无状态 widget
class LeonStateLessWidget extends StatelessWidget {
  final String text;

  const LeonStateLessWidget({super.key, required this.text});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        text,
        style: const TextStyle(color: Colors.yellow, fontSize: 26),
      ),
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

2.2、StatefulWidget

• TextField、Checkbox、Radio、Form、Slider、InkWell 等都是 StatefulWidget 的子类
• StatefulWidget 使用 setState 方法管理状态变化，调用 setState 方法告诉 Flutter 框架某个状态发生了改变，Flutter 会重新运行 build 方法
• createState() 方法会创建一个管理 widget 状态的状态对象 _xxxState，_xxxState() 类会实现 widget 的 build 方法

代码示例

//有状态 widget
class LeonStatefulWidget extends StatefulWidget {
  const LeonStatefulWidget({super.key});

  @override
  State<LeonStatefulWidget> createState() => _LeonStatefulWidgetState();
}

class _LeonStatefulWidgetState extends State<LeonStatefulWidget> {
  var count = 0;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: [
          Text('点击次数: $count'),
          ElevatedButton(onPressed: _onClick, child: const Text('点我'))
        ],
      ),
    );
  }

  void _onClick() {
    setState(() {
      count++;
    });
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

2.3、代码示例

import 'package:flutter/material.dart';
import 'package:zlzf/widget.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Leon Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Scaffold(
          appBar: AppBar(
            title: const LeonStateLessWidget(
              text: 'Widget 学习',
            ),
          ),
          body: const LeonStatefulWidget()
        ));
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

3、补充

• Flutter 中状态管理的 3 中主要方式：