Flutter 使用 Key 强制重新渲染小部件

这篇具有很好参考价值的文章主要介绍了Flutter 使用 Key 强制重新渲染小部件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Flutter 使用 Key 强制重新渲染小部件

一、Key 的作用

Key 在 Flutter 中是一个抽象类,它有两个主要的子类:LocalKey 和 GlobalKey。LocalKey 只在当前小部件树中唯一,而 GlobalKey 在整个应用程序中是全局唯一的。

Key 的主要作用是标识小部件。当 Flutter 进行小部件树的重建时,它会根据 Key 来判断哪些小部件需要重新创建,哪些小部件可以复用。这样可以提高性能,减少不必要的重建。

二、强制重新渲染小部件的步骤

1、 创建一个 Key

首先,我们需要创建一个 Key 对象。可以使用 GlobalKey 或自定义的 LocalKey。如果想在小部件树中唯一标识该 Key,可以使用 UniqueKey 来生成全局唯一的 Key。

late Key _key = UniqueKey();

2、将 Key 分配给小部件

将创建的 Key 分配给要重新渲染的小部件。可以在创建小部件时通过构造函数传递 Key,或者使用 key 属性将 Key 分配给现有的小部件。

_MyWidget(key: _key)

3、强制重新渲染小部件

当需要强制重新渲染小部件时,可以使用 setState 方法来触发小部件的重建。

setState(() {
    _key = UniqueKey();
});

这将导致 Flutter 重新调用小部件的 build 方法,并根据新的状态重新渲染小部件。文章来源地址https://www.toymoban.com/news/detail-491213.html

三、代码案例

import 'package:flutter/material.dart';
import 'package:perfect_video/common/global/global_color.dart';
import 'package:perfect_video/common/utils/toast_utils.dart';
import 'package:perfect_video/modules/home/index/film/pages/film_page.dart';

class SearchInputPage extends StatefulWidget {
  const SearchInputPage({super.key});

  
  State<SearchInputPage> createState() => _SearchInputPageState();
}

class _SearchInputPageState extends State<SearchInputPage> {
  // 关键词控制器
  late TextEditingController _keywordController;

  // 是否显示搜索结果
  late bool isShowSearchResult = false;

  // 唯一 key
  late Key _key = UniqueKey();

  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: _appBar(context),
      body: Visibility(
        visible: isShowSearchResult,
        child: FilmPage(key: _key, name: _keywordController.text),
      ),
    );
  }

  // 标题栏
  _appBar(BuildContext context) {
    return AppBar(
      elevation: 0,
      backgroundColor: Colors.white,
      shape: UnderlineInputBorder(borderSide: BorderSide(color: Theme.of(context).dividerColor)),
      leading: IconButton(
        icon: const Icon(
          Icons.arrow_back_rounded,
          color: GlobalColor.primaryColor,
        ),
        onPressed: () {
          // 返回
          Navigator.pop(context);
        },
      ),
      // titleSpacing: 0,
      title: TextField(
        controller: _keywordController,
        autofocus: true,
        style: const TextStyle(fontSize: 18),
        // 光标颜色
        cursorColor: GlobalColor.primaryColor,
        decoration: const InputDecoration(
          border: InputBorder.none,
          hintText: "请输入关键词",
        ),
        textInputAction: TextInputAction.search,
        // 点击事件
        onSubmitted: (value) {
          _search(context);
        },
      ),
      actions: [
        IconButton(
          icon: const Icon(
            Icons.search_rounded,
            color: GlobalColor.primaryColor,
          ),
          onPressed: () {
            // 搜索
            _search(context);
          },
        ),
      ],
    );
  }

  // 搜索处理
  _search(BuildContext context) {
    if (_keywordController.text.isEmpty) {
      ToastUtils.showMessage(context, "请输入关键词");
      return;
    }
    setState(() {
      if (!isShowSearchResult) {
        isShowSearchResult = true;
      } else {
        _key = UniqueKey();
      }
    });
  }

  
  void initState() {
    super.initState();
    _keywordController = TextEditingController();
  }

  
  void dispose() {
    _keywordController.dispose();
    super.dispose();
  }
}

到了这里,关于Flutter 使用 Key 强制重新渲染小部件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 已解决:Vue改变数据后界面不自动渲染,Vue中使用v-for遍历对象数组,当给其中某个元素对象重新赋值之后,页面组件列表没有渲染更新。

    问题如标题所说,Vue中使用v-for遍历对象数组,当给数组其中某个元素对象重新赋值之后,页面组件列表没有及时更新渲染,而是在页面进行了其他的渲染操作以后列表才更新出来新的数据,那同样给对象内的属性值赋值也可能存在不渲染的情况,一并解决,尤其发生在网络

    2024年02月06日
    浏览(55)
  • 默认开启“停用HW叠加层”开关,强制GPU渲染

    Android开发者模式的选项中有一项叫“停用HW叠加层”,这个选项使能之后,系统所有的UI合成都会全部强制GPU去完成,HWC不再参与合成,需求来源就是默认要使能该功能,即禁用HW叠加,具体实现如下: 因为开机默认状态,不会加载开发者模式的页面,因此在开发者模式的控

    2024年02月11日
    浏览(71)
  • 微信小程序中的条件渲染和列表渲染,wx:if ,wx:elif,wx:else,wx:for,wx:key的使用,以及block标记和hidden属性的说明

    1.1. 语法格式 (wx:if, wx:elif ,wx:else) 当condition条件为true时,代码块渲染显示,为false时,代码块不进行渲染. 可以结合 wx:elif=“{{condition}}” 和 wx:else来进行判断 1.2. block标记 可以使用block标记,一次性的控制多个组件的显示与隐藏,block标记本身并不进行渲染。 block并不是一个组

    2024年02月16日
    浏览(46)
  • 前端React篇之哪些方法会触发 React 重新渲染?重新渲染 render 会做些什么?

    在React中,以下方法会触发重新渲染: setState() :当调用组件的setState方法并传入新的状态值时,React会触发重新渲染。 forceUpdate() :可以强制组件重新渲染,不管组件的状态是否发生变化。 props改变 :当组件接收到新的props时,它会进行重新渲染。 context改变 :如果使用了

    2024年04月10日
    浏览(41)
  • 2023超级3D动画渲染工具——key shot“底纹云渲染”

    KeyShot是Luxion的3D渲染动画工具,属于交互式光线跟踪和全局照明渲染器。 与KeyShot一起使用的软件包括3dsMax、Maya、Rhino、NX和C4D。 它可以方便快捷地创建3D模型,具有强大的实时动画系统,以其简单高效的渲染方式受到众多设计师的喜爱! 光线跟踪( Ray tracing )是三维计算机图

    2024年02月12日
    浏览(43)
  • Vue dialog打开时重新渲染

    目录 HTML、CSS和JavaScript基础 1. HTML标记语言: 2. CSS样式: 3. JavaScript编程语言: 基础开发技能 学习Git 了解HTTP(S)协议 学习终端 算法和数据结构 学习设计模式 JavaScript框架和库 1. jQuery: 2. Bootstrap: ES6+和模块化开发 1. ES6+新特性 2. 模块化开发 3. 常用构建工具 React基础概念 1

    2024年02月12日
    浏览(45)
  • vue组件中重新渲染的3种方式

    这个是最推荐的。因为vue是通过虚拟Dom算法来判断元素的变化,是否变化的核心是通过判断新旧元素的key值是否变化。如果你的key是变化的,则重新渲染该元素,如果key没变,则不会重新渲染。 所以如果你想让你的组件重新渲染,你给组件加上 key 属性,然后在需要重新渲染

    2024年02月12日
    浏览(36)
  • vue中data的数组怎么操作会重新渲染页面,怎么操作不会渲染页面

    目录 会渲染页面的操作 这是为什么呢 不会导致页面渲染的操作  通过索引值改变数组导致页面不渲染的解决方法 this.$set的实现原理 push() pop() shift() unshift() splice() sort() reverse() vue2.0还增加个方法可以观测Vue.set(items, indexOfItem, newValue) Vue.set()的用法 filter(), concat(), slice() 。这些

    2024年01月16日
    浏览(38)
  • Flutter Widget 生命周期 & key探究

    在Flutter中,一切皆是Widget(组件),Widget的功能是“描述一个UI元素的配置数据”,它就是说,Widget其实并不是表示最终绘制在设备屏幕上的显示元素,它只是描述显示元素的一个配置数据。 实际上,Flutter中真正代表屏幕上显示元素的类是 Element,也就是说Widget 只是描述

    2024年02月08日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包