Flutter学习13 - Widget

1、Flutter中常用 Widget

2、StatelessWidget 和 StateFulWidget

  • Flutter 中的 widget 有很多,但主要分两种:
StatelessWidget 无状态的 widget 如果一个 widget 是最终的或不可变的,那么它就是无状态的
StatefulWidget 有状态的 widget 如果一个 widget 会被用户交互或数据导致状态改变,那么它就是有状态的

2.1、StatelessWidget

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

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

(1) 将 widget 插入树中时

(2) 当 widget 的父级更改配置时

(3) 当它依赖的 InheritedWidget 发生改变时

代码示例

dart 复制代码
//无状态 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),
      ),
    );
  }
}

2.2、StatefulWidget

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

代码示例

dart 复制代码
//有状态 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++;
    });
  }
}

2.3、代码示例

dart 复制代码
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()
        ));
  }
}

3、补充

  • Flutter 中状态管理的 3 中主要方式:
每个 widget 管理自己的状态 如果所讨论的状态是用户数据,例如复选框的已选中或未选中状态,或滑块的位置,则状态最好由父widget管理
父 widget 管理 widget 的状态 如果widget的状态取决于动作,例如动画,那么最好是由widget自身来管理状态
混合搭配管理 见机行事
相关推荐
张风捷特烈21 小时前
Flutter 伪3D绘制#03 | 轴测投影原理分析
android·flutter·canvas
云上艺旅1 天前
K8S学习之基础七十四:部署在线书店bookinfo
学习·云原生·容器·kubernetes
你觉得2051 天前
哈尔滨工业大学DeepSeek公开课:探索大模型原理、技术与应用从GPT到DeepSeek|附视频与讲义下载方法
大数据·人工智能·python·gpt·学习·机器学习·aigc
马拉萨的春天1 天前
flutter 项目结构目录以及pubspec.ymal等文件描述
flutter
A旧城以西1 天前
数据结构(JAVA)单向,双向链表
java·开发语言·数据结构·学习·链表·intellij-idea·idea
无所谓จุ๊บ1 天前
VTK知识学习(50)- 交互与Widget(一)
学习·vtk
FAREWELL000751 天前
C#核心学习(七)面向对象--封装(6)C#中的拓展方法与运算符重载: 让代码更“聪明”的魔法
学习·c#·面向对象·运算符重载·oop·拓展方法
吴梓穆1 天前
UE5学习笔记 FPS游戏制作38 继承标准UI
笔记·学习·ue5
Three~stone1 天前
MySQL学习集--DDL
数据库·sql·学习
齐尹秦1 天前
HTML 音频(Audio)学习笔记
学习