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
方法来触发小部件的重建。文章来源:https://www.toymoban.com/news/detail-491213.html
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模板网!