Flutter

Question

我正在学习 flutter，我正在使用 tabBars，我在保存状态时遇到了问题。我在下面放了一个我的问题的小例子。基本上，有一个按钮和一个状态计数器。当我单击按钮时，我看到文本字段正确更新。但是，当我切换到另一个选项卡并返回时，文本字段回到零。

我发现如果我将以下行移到 _CounterState 之外，使其在文件的顶层定义，那么它就可以正常工作。当我切换标签时，当我切换回来时计数器保持正确的计数

int _counter = 0;

我觉得这不是执行此操作的合适方法，而且我看到的所有示例都在 class 中包含变量。谁能给我任何见解？如果它在 class 内，为什么会重置？我应该把它放在 class 之外吗？下面是简化的完整示例。

import 'package:flutter/material.dart';

void main() {
  runApp(new TabBarDemo());
}

class TabBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new DefaultTabController(
        length: 3,
        child: new Scaffold(
          appBar: new AppBar(
            bottom: new TabBar(
              tabs: [
                new Tab(icon: new Icon(Icons.directions_car)),
                new Tab(icon: new Icon(Icons.directions_transit)),
                new Tab(icon: new Icon(Icons.directions_bike)),
              ],
            ),
            title: new Text('Tabs Demo'),
          ),
          body: new TabBarView(
            children: [
              new Counter(),
              new Icon(Icons.directions_transit),
              new Icon(Icons.directions_bike),
            ],
          ),
        ),
      ),
    );
  }
}

class Counter extends StatefulWidget {
  @override
  _CounterState createState() => new _CounterState();
}

class _CounterState extends State<Counter> {
  int _counter = 0;

  void _increment() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Row(
      children: <Widget>[
        new RaisedButton(
          onPressed: _increment,
          child: new Text('Increment'),
        ),
        new Text('Count: $_counter'),
      ],
    );
  }
}

下面是计数器移出 class

的示例

import 'package:flutter/material.dart';

void main() {
  runApp(new TabBarDemo());
}

class TabBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new DefaultTabController(
        length: 3,
        child: new Scaffold(
          appBar: new AppBar(
            bottom: new TabBar(
              tabs: [
                new Tab(icon: new Icon(Icons.directions_car)),
                new Tab(icon: new Icon(Icons.directions_transit)),
                new Tab(icon: new Icon(Icons.directions_bike)),
              ],
            ),
            title: new Text('Tabs Demo'),
          ),
          body: new TabBarView(
            children: [
              new Counter(),
              new Icon(Icons.directions_transit),
              new Icon(Icons.directions_bike),
            ],
          ),
        ),
      ),
    );
  }
}

class Counter extends StatefulWidget {
  @override
  _CounterState createState() => new _CounterState();
}

int _counter = 0; //<-- MOVED OUTSIDE THE _CounterState CLASS
class _CounterState extends State<Counter> {


  void _increment() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Row(
      children: <Widget>[
        new RaisedButton(
          onPressed: _increment,
          child: new Text('Increment'),
        ),
        new Text('Count: $_counter'),
      ],
    );
  }
}

Answer 1

由于每次转到给定的 TabView 时都会构建 _CounterState 小部件，因此您需要将 _counter 变量放入状态配置 class (Counter)。

class Counter extends StatefulWidget {
  int _counter = 0;
  @override
  _CounterState createState() => new _CounterState();
}

class _CounterState extends State<Counter> {
  void _increment() {
    setState(() {
      widget._counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Row(
      children: <Widget>[
        new RaisedButton(
          onPressed: _increment,
          child: new Text('Increment'),
        ),
        new Text('Count: ${widget._counter}'),
      ],
    );
  }
}

Answer 2

将变量放在那个有状态的小部件中，然后每次都调用它作为 "widget.variable_name"

Answer 3

因为我用了一种解决方案AutomaticKeepAliveClientMixin

您需要将此 mixin 与 StateFullWidget 的状态 class 一起使用。

您需要将 true 传递给 wantKeepAlive getter 方法。

class SampleWidget extends StatefulWidget {
  @override
  _SampleWidgetState createState() => _SampleWidgetState();
}

class _SampleWidgetState extends State<SampleWidget> with AutomaticKeepAliveClientMixin{
  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Container();
  }

  @override
  // TODO: implement wantKeepAlive
  bool get wantKeepAlive => true;
}

这将保存您的状态并停止您的小部件再次重新创建。我已经将它与 Tabbar 和 PageView 一起使用，并且工作正常。

Flutter - Stateful Widget 在切换选项卡时不保存计数器状态

Flutter - Stateful Widget Doesn't Save Counter State When Switching Tabs

stateful

dart

statefulwidget