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

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();
  }
}