当前位置：首页 > news >正文

一周掌握Flutter开发--1、Widget 系统

news 来源：原创 2025/6/26 6:21:18

在这里插入图片描述

文章目录

- - Widget 系统
  - 核心概念
  - - 1.1 StatelessWidget（静态 Widget）
    - 1.2 StatefulWidget（动态 Widget）
  - 必须掌握
  - - 1. Widget 的嵌套与组合
    - 2. BuildContext 的作用
    - 3. 生命周期（initState、build、dispose）
  - 总结

Widget 系统

Flutter 的 UI 完全由 Widget 构成，Widget 是 Flutter 的核心概念。Widget 可以是按钮、文本、布局容器，甚至是整个页面。Flutter 的 Widget 系统非常灵活，通过组合和嵌套不同的 Widget 来构建复杂的 UI。

核心概念

1.1 StatelessWidget（静态 Widget）

特点：不可变，一旦创建就不能修改其状态。
适用场景：用于展示静态内容，例如文本、图标、按钮等。

示例：

class MyText extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hello, Flutter!');
  }
}

1.2 StatefulWidget（动态 Widget）

特点：可变，可以在运行时动态更新其状态。
适用场景：用于需要根据用户交互或数据变化更新的 UI，例如表单、计数器等。

示例：

class Counter extends StatefulWidget {
  @override
  _CounterState createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int count = 0;

  void increment() {
    setState(() {
      count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Count: $count'),
        ElevatedButton(
          onPressed: increment,
          child: Text('Increment'),
        ),
      ],
    );
  }
}

必须掌握

1. Widget 的嵌套与组合

核心思想：Flutter 的 UI 是通过嵌套和组合多个 Widget 来构建的。

示例：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('My App')),
        body: Center(
          child: Column(
            children: [
              Text('Hello, Flutter!'),
              ElevatedButton(
                onPressed: () {},
                child: Text('Click Me'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

说明：
- MaterialApp 是应用的根 Widget。
- Scaffold 提供了基本的页面结构（如 AppBar、Body）。
- Center、Column 是布局 Widget，用于排列子 Widget。

2. BuildContext 的作用

定义：BuildContext 是 Widget 在树中的位置信息，用于访问父级 Widget 的数据或服务。
用途：
- 访问主题（Theme.of(context)）。
- 导航（Navigator.of(context)）。
- 获取父级 Widget 的数据（InheritedWidget）。

示例：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context); // 获取主题
    return Text('Hello', style: theme.textTheme.headline4);
  }
}

3. 生命周期（initState、build、dispose）

StatefulWidget 的生命周期：
1. createState：创建 State 对象。
2. initState：初始化状态（只调用一次）。
3. didChangeDependencies：依赖变化时调用。
4. build：构建 UI（每次状态变化时调用）。
5. setState：触发 UI 更新。
6. dispose：销毁 State 对象（释放资源）。

示例：

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  @override
  void initState() {
    super.initState();
    print('Widget initialized');
  }

  @override
  void dispose() {
    print('Widget disposed');
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Text('Hello, Flutter!');
  }
}