Flutter Widget and Bald(下)

简介: Flutter Widget and Bald

效果图


StatefulWidget 及 State


  • 可变状态的 Widget


  • 创建 State 对象


  • 多生命周期


StatefulWidget の Demo


每点击文本一次,body文本中就会多一次‘赞’


// main.dart
import 'package:flutter/material.dart';
import 'stateful.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData.light(),
      home: MyStatefulApp("Vava熊の一天")
    );
  }
}


//stateful.dart
import 'package:flutter/material.dart';
class MyStatefulApp extends StatefulWidget {
  String content;
  MyStatefulApp(this.content);
  @override
  State<StatefulWidget> createState() {
    return MyStatefulAppState();
  }
}
class MyStatefulAppState extends State<MyStatefulApp> {
  bool isShowText =true;
  void increment(){
    setState(() {
      widget.content += "赞";
    });
  }
  //build() 方法在 didChangeDependencies()(或者 didUpdateWidget() )之后调用
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar:AppBar(
          title: Text('StatefulWidget及State'),
        ),
        body:Center(
          child: GestureDetector(
            child: isShowText? Text(widget.content) :null,
            onTap: increment,
           )
        )
    );
  }
  //-------only 生命周期 log------------
  //创建 State 对象后要调用的第一个方法
  @override
  void initState() {
    super.initState();
    print("initState");
    context.runtimeType;
  }
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    print("didChangeDependencies");
  }
  //runtimeType 和 Widget.key 都一样,那么就会调用 didUpdateWidget()。
  @override
  void didUpdateWidget(MyStatefulApp oldWidget) {
    super.didUpdateWidget(oldWidget);
    print("didUpdateWidget");
  }
  // StaefulWidget 从树中移除时
  @override
  void dispose() {
    super.dispose();
    print("dispose");
  }
  //执行 HotReload,就会触发 reassemble(),这提供了重新初始化在 initState() 方法中准备的任何数据的机会,包括全局变量。
  @override
  void reassemble() {
    super.reassemble();
    print("reassemble");
  }
}


效果图



State 的生命周期


在上面的例子中,除了效果外,我们也看到了关于生命周期的备注信息。


// 控制台日志
// 1.第一次 | 新打开
....
Restarted application in 1,153ms.
flutter: initState
flutter: didChangeDependencies
flutter: reassemble
flutter: didUpdateWidget
...
// 2.我们点击⚡️按钮热重载
...
Syncing files to device iPhone Xʀ...
flutter: reassemble
flutter: didUpdateWidget
...
// 3. 移除 widget
...
flutter: reassemble
flutter: dispose
Reloaded 2 of 442 libraries in 117ms.
...


盗图小结



葵花宝典:如果 UI 需要改变,就用 StatefulWidget。不需要改变,就用 StatelessWidget。


写在最后の总结


Widget 特点


  • 一切皆 Widget


  • UI的配置信息


  • 一次性的


  • 轻量的


Widget 应用


Widget 众多,需要开发者们更多地实践与性能的关注。

相关文章
|
20天前
深入理解Flutter鸿蒙next版本 中的Widget继承:使用extends获取数据与父类约束
本文详细介绍了Flutter中如何通过继承其他Widget来创建自定义组件。首先解释了Widget继承的基本概念,包括StatelessWidget和StatefulWidget的区别。接着通过具体示例展示了如何继承StatelessWidget和StatefulWidget,并在子类中访问父类的build方法和状态。最后,结合多个自定义Widget展示了如何在实际应用中灵活使用继承和组合来构建复杂的UI。
70 8
|
18天前
|
容器
flutter&鸿蒙next 使用 InheritedWidget 实现跨 Widget 传递状态
在 Flutter 中,状态管理至关重要。本文详细介绍了如何使用 InheritedWidget 实现跨 Widget 的状态传递。InheritedWidget 允许数据在 Widget 树中向下传递,适用于多层嵌套的场景。通过一个简单的计数器示例,展示了如何创建和使用 InheritedWidget,包括其基础概念、工作原理及代码实现。虽然 InheritedWidget 较底层,但它是许多高级状态管理解决方案的基础。
91 2
|
1月前
|
容器
flutter:第一个flutter&Widget的使用 (二)
本文介绍了Flutter框架下的基本组件及其用法,包括简单的 Stateless Widget 如文本和按钮,以及更复杂的 StatefulWidget 示例。详细解释了如何使用 `context` 获取祖先小部件的信息,并展示了 `MaterialApp` 的属性及用途。此外,还探讨了 `StatefulWidget` 与 `StatelessWidget` 的区别,以及 `AppBar` 的常见属性配置方法。适合Flutter初学者参考学习。
|
18天前
|
Dart JavaScript 前端开发
Flutter 的 Widget 概述与常用 Widgets 与鸿蒙 Next 的对比
Flutter 是 Google 开发的开源 UI 框架,用于快速构建高性能的移动、Web 和桌面应用。Flutter 通过 Widget 构建 UI,每个 UI 元素都是 Widget,包括文本、按钮、图片等。Widget 不仅描述外观,还描述行为,是不可变的。常见的 Widget 包括结构型(Container、Column、Row)、呈现型(Text、Image)、交互型(ElevatedButton)和状态管理型(StatefulWidget)。Flutter 与鸿蒙 Next 在组件化架构、开发语言、布局系统、性能和跨平台支持方面各有优势
68 0
|
4月前
Flutter-底部弹出框(Widget层级)
文章描述了如何在Flutter中使用DraggableScrollableSheet创建一个底部弹出框,同时保持其可手势滑动关闭。作者遇到问题并提出对原控件进行扩展,以支持头部和列表布局的滑动关闭功能。
183 0
|
5月前
Flutter StreamBuilder 实现局部刷新 Widget
Flutter StreamBuilder 实现局部刷新 Widget
45 0
|
6月前
|
Android开发
Flutter完整开发实战详解(六、 深入Widget原理),2024百度Android岗面试真题收录解析
Flutter完整开发实战详解(六、 深入Widget原理),2024百度Android岗面试真题收录解析
|
6月前
|
开发框架 前端开发 搜索推荐
【Flutter前端技术开发专栏】Flutter中的自定义Widget与渲染流程
【4月更文挑战第30天】探索Flutter的自定义Widget与渲染流程。自定义Widget是实现复杂UI设计的关键,优点在于个性化设计、功能扩展和代码复用,但也面临性能优化和复杂性管理的挑战。创建步骤包括设计结构、定义Widget类、实现构建逻辑和处理交互。Flutter渲染流程涉及渲染对象树、布局、绘制和合成阶段。实践案例展示如何创建带渐变背景和阴影的自定义按钮。了解这些知识能提升应用体验并应对开发挑战。查阅官方文档以深入学习。
77 0
【Flutter前端技术开发专栏】Flutter中的自定义Widget与渲染流程
|
6月前
|
JavaScript 前端开发 开发者
【Flutter前端技术开发专栏】Flutter中的Widget与状态管理
【4月更文挑战第30天】本文探讨了Flutter的Widget和状态管理。Widget是Flutter构建UI的基础,分为有状态和无状态两种。状态管理确保UI随应用状态变化更新,影响应用性能和可维护性。文章介绍了`setState`、`Provider`、`Riverpod`、`Bloc`和`Redux`等状态管理方法,并通过计数器应用展示了其实现。选择合适的状态管理策略对高效开发至关重要。
85 0
【Flutter前端技术开发专栏】Flutter中的Widget与状态管理
|
6月前
|
前端开发 开发者 UED
Flutter的自定义Painter:深入探索自定义绘制Widget的技术实现
【4月更文挑战第26天】Flutter的自定义Painter允许开发者根据需求绘制独特UI,通过继承`CustomPaint`类和重写`paint`方法实现。在`paint`中使用`Canvas`绘制图形、路径等。创建自定义Painter类后,将其作为`CustomPaint` Widget的`painter`属性使用。此技术可实现自定义形状、渐变、动画等复杂效果,提升应用视觉体验。随着Flutter的进化,自定义Painter将提供更丰富的功能。