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

水深无声 2023-10-12 13:46 4阅读 0赞

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

#### 文章目录 ####

*  Flutter 使用 Key 强制重新渲染小部件
 *  一、Key 的作用
 *  二、强制重新渲染小部件的步骤
 *   *  1、 创建一个 Key
     *  2、将 Key 分配给小部件
     *  3、强制重新渲染小部件
 *  三、代码案例

## 一、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` 方法，并根据新的状态重新渲染小部件。

## 三、代码案例 ##

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});
    
      @override
      State<SearchInputPage> createState() => _SearchInputPageState();
    }
    
    class _SearchInputPageState extends State<SearchInputPage> {
        
      // 关键词控制器
      late TextEditingController _keywordController;
    
      // 是否显示搜索结果
      late bool isShowSearchResult = false;
    
      // 唯一 key
      late Key _key = UniqueKey();
    
      @override
      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();
          }
        });
      }
    
      @override
      void initState() {
        
        super.initState();
        _keywordController = TextEditingController();
      }
    
      @override
      void dispose() {
        
        _keywordController.dispose();
        super.dispose();
      }
    }