flutter：父级重建后子级小部件未重建

Question

版本：
Flutter-版本：1.12.14 通道开发
Dart-版本：2.7.0

问题：
我想写一个 Todo 应用程序。当我单击浮动按钮时添加一个新的待办事项，但在某些情况下它效果不佳。

问题在Scaffold.body代码中，详细信息。

我使用时效果很好TodoPage(todoList: _todoList)。

_pageList.elementAt(_activeIndex)当我提交文本字段时不起作用。

print('Build Home')提交后发现有打印，但print('Build TodoPage')没有打印。

为什么？？？

我的代码：

import 'package:flutter/material.dart';

void main() => runApp(App());

class App extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: 'TodoList',
      home: Home(),
    );
  }
}


class Home extends StatefulWidget{
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home>{
  List<String> _todoList = ['a', 'b', 'c'];
  TextEditingController _controller;
  List<Widget> _pageList;
  int _activeIndex;
  Widget _curPage;

  @override
  void initState(){
    super.initState();
    _activeIndex = 0;
    _pageList = [TodoPage(todoList: _todoList,), OtherPage()];
    _curPage = _pageList[_activeIndex];
    _controller = TextEditingController();
  }

  @override
  Widget build(BuildContext context){
    print('build Home');
    return Scaffold(
      appBar: AppBar(title: Text('Todo'),),
      body: _pageList.elementAt(_activeIndex), // this is not work
      // body: TodoPage(todoList: _todoList,), // this is work well
      floatingActionButton: FloatingActionButton(
        onPressed: _openDlg,
        child: Icon(Icons.add),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.list), title: Text('Todo')),
          BottomNavigationBarItem(icon: Icon(Icons.favorite), title: Text('Other')),
        ],
        currentIndex: _activeIndex,
        selectedItemColor: Colors.blue,
        onTap: _onMenuTap,
      ),
    );
  }


  _onMenuTap(int index){
    setState(() {
      _activeIndex = index;
    });
  }

  _openDlg(){
    showDialog(
      context: context,
      builder: (BuildContext context){
        return SimpleDialog(
          children: <Widget>[
            TextField(
              controller: _controller,
            ),
            SimpleDialogOption(
              child: FloatingActionButton(child: Text('submit'), onPressed: _addTodo,),
            )
          ],
        );
      }
    );
  }

  _addTodo(){
    print(_controller.text);
    setState(() {
      _todoList.add(_controller.text);
    });
  }
}

class TodoPage extends StatefulWidget{
  TodoPage({Key key, this.todoList}): super(key: key);
  List<String> todoList;
  _TodoPageState createState() => _TodoPageState();
}

class _TodoPageState extends State<TodoPage>{

  @override
  void initState(){
    super.initState();
  }

  @override 
  Widget build(BuildContext context){
    print('build TodoPage');
    return Column(
      children: _buildTodoList(),
    );
  }

  List <Widget> _buildTodoList(){
    return widget.todoList.map((todo){
      return Text(todo, style: TextStyle(fontSize: 30),);
    }).toList();
  }
}


class OtherPage extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return Center(child: Text('Other Page'));
  }
}

Answer 1

这是合乎逻辑的。

您正在重用 a 的现有实例Widget，并且小部件是不可变的。因此，框架注意到小部件的实例没有更改，并且不会调用build来优化性能。

你的问题是，你违反了小部件不可变的规则，这使得这种优化破坏了你的应用程序。

你做了什么：

class MyState extends State<MyStatefulWidget> {
  SomeWidget myWidget = SomeWidget()..someProperty = "initial value";

  void onSomething() {
    setState(() {
      myWidget.someProperty = "new value";
    });
  }

  @override
  Widget build(BuildContext context) {
    return myWidget;
  }
}

你应该做什么：

class MyState extends State<MyStatefulWidget> {
  SomeWidget myWidget = SomeWidget(someProperty: "initial value");

  void onSomething() {
    setState(() {
      myWidget = SomeWidget(someProperty: "new value");
    });
  }

  @override
  Widget build(BuildContext context) {
    return myWidget;
  }
}

或者，根本不缓存小部件实例。