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自身来管理状态
混合搭配管理 见机行事
相关推荐
_hermit:3 分钟前
【从零开始java学习|小结】记录学习和编程中的问题
java·学习
屁股割了还要学12 分钟前
【数据结构入门】排序算法(4)归并排序
c语言·数据结构·学习·算法·排序算法
武昌库里写JAVA1 小时前
Mac下Python3安装
java·vue.js·spring boot·sql·学习
Dabei2 小时前
Flutter 中实现 TCP 通信
flutter
孤鸿玉2 小时前
ios flutter_echarts 不在当前屏幕 白屏修复
flutter
程序员东岸4 小时前
C语言入门指南:字符函数和字符串函数
c语言·笔记·学习·程序人生·算法
潘潘潘潘潘潘潘潘潘潘潘潘4 小时前
【MySQL】从零开始学习MySQL:基础与安装指南
linux·运维·服务器·数据库·学习·mysql
前端 贾公子4 小时前
《Vuejs设计与实现》第 16 章(解析器) 上
vue.js·flutter·ios
东风西巷4 小时前
全能的3D创作平台,Blender(免费开源3D建模工具)
学习·3d·开源·blender·软件需求
汉堡包0014 小时前
【靶场练习】--DVWA第一关Brute Force(暴力破解)全难度分析
学习·安全