在 Flutter 的列中单击同一页面上的按钮返回一个新的小部件答案

【问题标题】：Return a new widget on button click on the same page, in a column in Flutter在 Flutter 的列中单击同一页面上的按钮返回一个新的小部件
【发布时间】：2020-04-16 16:13:31
【问题描述】：

我想在同一页面上的一列中单击按钮返回一个新的小部件。因此，当单击按钮时，我试图在与列中的一个子项相同的页面上返回一个容器。

这是我的示例代码：

Column(
      children: <Widget>[
       // here I want to return my container in the show function

        Text(
          "This is a sample text",
          style: TextStyle(fontSize: 40),

        ),
        RaisedButton(
          child: Text("click"),
          onPressed: () {
            debugPrint("clicked");
            show();
          },
        )
      ],
    );



show() {
    return SampleContainer();
  }



class SampleContainer extends StatefulWidget {
  @override
  _SampleContainerState createState() => _SampleContainerState();
}

class _SampleContainerState extends State<SampleContainer> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text("hi"),


);
  }
}

【问题讨论】：

标签： flutter dart

【解决方案1】：

您可以使用Visibility class

这里有一个完整的例子。

class VisibiltyExampleContainer extends StatefulWidget {
  const VisibiltyExampleContainer({
    Key key,
  }) : super(key: key);

  @override
  _VisibiltyExampleContainerState createState() =>
      _VisibiltyExampleContainerState();
}

class _VisibiltyExampleContainerState extends State<VisibiltyExampleContainer> {
  var _showContainer;

  @override
  void initState() {
    _showContainer = false;
    super.initState();
  }

  void show() {
    setState(() {
      _showContainer = !_showContainer;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
          child: Container(
        child: Column(
          children: <Widget>[
            Visibility(
              child: SampleContainer(),
              visible: _showContainer,
            ),
            Text(
              "This is a sample text",
              style: TextStyle(fontSize: 40),
            ),
            RaisedButton(
              child: Text("click"),
              onPressed: () {
                debugPrint("clicked");
                show();
              },
            )
          ],
        ),
      )),
    );
  }
}

【讨论】：

【解决方案2】：

创建一个变量

bool showContainer=false;

然后是 Column Widget

Column(
      children: <Widget>[
       // here I want to return my container in the show function

            Text(
              "This is a sample text",
              style: TextStyle(fontSize: 40),

            ),
            if(showContainer)
              SampleContainer(),
            RaisedButton(
              child: Text("click"),
              onPressed: () {
                debugPrint("clicked");
                setState () {
                 showContainer=true;
                }
              },
            )
          ],
        );

【讨论】：

【解决方案3】：

作为answer by dev 的替代品。您可以使用这种方法在每次单击按钮时添加一个小部件：


class Demo extends StatefulWidget {
  @override
  _DemoState createState() => _DemoState();
}

class _DemoState extends State<Demo> {
  List<Widget> widgets = List<Widget>();

  @override
  void initState(){
    widgets = <Widget>[
      Text(
        "This is a sample text",
        style: TextStyle(fontSize: 40),
      ),
      RaisedButton(
        child: Text("click"),
        onPressed: () {
          debugPrint("clicked");
          debugPrint('widgets: $widgets');
          widgets.insert(0, SampleContainer());
          setState(() {});
        },
      )
    ];
  }
  @override
  Widget build(BuildContext context) {

    return Center(
      child: Column(
        children: widgets,
      ),
    );
  }
}

show() {
  return SampleContainer();
}

class SampleContainer extends StatefulWidget {
  @override
  _SampleContainerState createState() => _SampleContainerState();
}

class _SampleContainerState extends State<SampleContainer> {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
      child: Text(
        "This is an additional Widget!!",
        style: TextStyle(fontSize: 40),
      ),
    );
  }
}

【讨论】：