Flutter - 切换选项卡时保存交互或状态

Question

我正在学习 Flutter，目前正在测试它的不同方面以进行应用开发。我的最终计划是有两个选项卡，每个选项卡都从 API 中提取一个列表并在列表视图中显示它。我担心的是，似乎每次切换选项卡时，选项卡都会被完全重绘为新的。如何保存选项卡和所有子项的当前状态，以便在我再次访问该选项卡时它们不会重置？我在想我错了吗？我是否应该手动将所有内容保存到变量并在每次绘制选项卡时重新填充它？

下面是我一直在测试的一个简单示例。这是一个简单的两个选项卡应用程序，每个页面上都有表单字段。如果我运行应用程序，然后在表单字段中输入一些内容，当我切换到选项卡二并返回时，表单字段的内容已被删除。

import 'package:flutter/material.dart';

void main() {
  print("start");
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Tab Test',
      home: new MyTabbedPage(),
    );
  }
}

class MyTabbedPage extends StatefulWidget {
  const MyTabbedPage({Key key}) : super(key: key);
  @override
  _MyTabbedPageState createState() => new _MyTabbedPageState();
}

class _MyTabbedPageState extends State<MyTabbedPage>
    with SingleTickerProviderStateMixin {
  final List<Tab> myTabs = <Tab>[
    new Tab(text: 'LEFT'),
    new Tab(text: 'RIGHT'),
  ];

  TabController _tabController;
  var index = 0;

  @override
  void initState() {
    super.initState();
    _tabController = new TabController(
        vsync: this, length: myTabs.length, initialIndex: index);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        bottom: new TabBar(
          controller: _tabController,
          tabs: myTabs,
        ),
      ),
      body: new TabBarView(
        controller: _tabController,
        children: myTabs.map((Tab tab) {
          return new Center(
              child: new TextFormField(
            decoration: new InputDecoration(labelText: 'Type Something:'),
          ));
        }).toList(),
      ),
    );
  }
}

Answer 1

所以，我想我在 setState 中找到了答案。我对上面的示例进行了重新设计，使其具有一个按钮，该按钮分别在每个选项卡上增加一个计数器。使用 setState 更新投票计数允许我保存字段的状态并在更改选项卡时将其保留。我在下面添加我的示例代码以供参考。

import 'package:flutter/material.dart';

void main() {
  print("start");
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Tab Test',
      home: new MyTabbedPage(),
    );
  }
}

class MyTabbedPage extends StatefulWidget {
  const MyTabbedPage({Key key}) : super(key: key);
  @override
  _MyTabbedPageState createState() => new _MyTabbedPageState();
}

class _MyTabbedPageState extends State<MyTabbedPage>
    with SingleTickerProviderStateMixin {
  final List<Tab> myTabs = <Tab>[
    new Tab(text: 'LEFT'),
    new Tab(text: 'RIGHT'),
  ];

  TabController _tabController;
  var index = 0;

  @override
  void initState() {
    super.initState();
    _tabController = new TabController(
        vsync: this, length: myTabs.length, initialIndex: index);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  int votesA = 0;
  int votesB = 0;
  void voteUpA() {
    setState(() => votesA++);
  }
  void voteUpB() {
    setState(() => votesB++);
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        bottom: new TabBar(
          controller: _tabController,
          tabs: myTabs,
        ),
      ),
      body: new TabBarView(
        controller: _tabController,
        children: <Widget>[
          new Column(
            children: <Widget>[
              Text("Hello Flutter - $votesA"),
              new RaisedButton(onPressed: voteUpA, child: new Text("click here"))
            ],
          ),
          new Column(
            children: <Widget>[
              Text("Hello Flutter - $votesB"),
              new RaisedButton(onPressed: voteUpB, child: new Text("click here"))
            ],
          ),
        ],
      ),
    );
  }
}