显示/隐藏小部件而不重新创建它

Question

假设我有 2 张卡，屏幕上一次显示一张。我有一个按钮可以用其他卡替换当前卡。现在假设卡 1 上有一些数据，卡 2 上有一些数据，我不想销毁它们每个上的数据，或者我不想再次重建它们中的任何一个。

我尝试使用 Stack Widget，并在顶部卡片上使用布尔值将一个组件重叠在其他组件之上。setstate通过按下按钮时调用，可以反转此布尔值的值。问题是，一旦我按下按钮，新卡就会再次重建，然后initState再次显示或被调用，这是我不想要的。有什么解决办法吗？

编辑：示例代码：

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var toggleFlag = false;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: toggleFlag
            ? CustomWidget(color: Colors.blue)
            : CustomWidget(color: Colors.red),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: _toggleCard,
        tooltip: 'Increment',
        child: new Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

  void _toggleCard() {
    setState(() {
      toggleFlag = !toggleFlag;
    });
  }
}

class CustomWidget extends StatefulWidget {
  var color;

  CustomWidget({this.color});

  @override
  State<StatefulWidget> createState() {
    return new MyState();
  }
}

class MyState extends State<CustomWidget> {
  @override   //I don't want this to be called again and again
  Widget build(BuildContext context) {  
    return new Container(
      height: 100.0,  
      width: 100.0,
      color: widget.color,
    );
  }
}

Answer 1

1-解决方案：\n你有一个像这样的小部件数组

\n

  final widgetList[widget1(), widget2()]\n  int currentIndex = 0;\n\n  IndexedStack (\n\xc2\xa0\xc2\xa0  index: currentIndex,\n\xc2\xa0\xc2\xa0  children: widgetList,\n  \xc2\xa0));\n

\n

2-解决方案：

\n

使用Stack小部件

\n

  int currentIndex = 0;\n\nStack(\n   children: [\n   Offstage(\n    offstage: currentIndex != 0,\n    child: bodyList[0],\n   ),\n   Offstage(\n    offstage: currentIndex != 1,\n    child: bodyList[1],\n   ),\n   Offstage(\n    offstage: currentIndex != 2,\n    child: bodyList[2],\n   ),\n   ],\n  )\n

\n

3-解决方案：\n您需要将其添加到您的有状态小部件状态中

\n

AutomaticKeepAliveClientMixin <Widgetname> like this\n\n   class _WidgetState extends State <Widgetname> with AutomaticKeepAliveClientMixin     <Widgetname> {\n   @override\n\xc2\xa0\xc2\xa0    bool get wantKeepAlive => true;\n   }\n

\n