使用返回小部件的功能在按钮单击时添加新小部件答案

【问题标题】：Add New Widget on button click with a finction that returns a widget使用返回小部件的功能在按钮单击时添加新小部件
【发布时间】：2021-01-13 18:35:48
【问题描述】：

您好，我是 Flutter 的新手，我想知道是否有一种方法可以通过单击按钮来添加新的 Widget。我查看了许多类似的堆栈溢出问题。但由于我知识渊博，其中大多数对我来说似乎很复杂且难以掌握。我需要做的就是在旧的构建容器下面添加一些容器

class MedPreC extends StatefulWidget {
  @override
  _MedPreCState createState() => _MedPreCState();
}
Widget returnWidget() {
  return Padding(
    padding: const EdgeInsets.all(8.0),
    child: Container(
      width: double.infinity,
      height: 40,
      color: Colors.red,
    ),
  );
}
class _MedPreCState extends State<MedPreC> {
  var child2 = Column(
    children: [
      returnWidget(),
    ],
  );
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          Expanded(
            child: Container(
              color: Colors.yellow,
              height: 400,
              width: double.infinity,
              child: child2,
            ),
          ),
          RaisedButton(
            child: Text("Add"),
            onPressed: () {
              setState(() {
                //
                child2.children.add(returnWidget());
                //
              });
            },
          )
        ],
      ),
    );
  }
}

这是我到目前为止所做的代码。整个代码将在另一个带有支架和东西的类中调用 returnWidget() 返回一个红色容器 child2 是一个在黄色容器内调用的列，其中一个红色容器作为其子项之一我需要在按钮按下时添加更多红色容器谢谢，就这样

【问题讨论】：

标签： flutter

【解决方案1】：

试试这个

class AddWidget extends StatefulWidget {
  @override
  _AddWidgetState createState() => _AddWidgetState();
}

class _AddWidgetState extends State<AddWidget> {
  List<Widget> containerList = [];

  Widget returnWidget() {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Container(
        width: double.infinity,
        height: 40,
        color: Colors.red,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          Expanded(
            child: Container(
              color: Colors.yellow,
              height: 400,
              width: double.infinity,
              child: Column(children: containerList),
            ),
          ),
          RaisedButton(
            child: Text("Add"),
            onPressed: () {
              setState(() {
                containerList.add(returnWidget());
              });
            },
          )
        ],
      ),
    );
  }
}

【讨论】：

【解决方案2】：

为此，您还需要检查小部件的溢出。所以你可以检查下面的代码。

import 'package:flutter/material.dart';

class MedPreC extends StatefulWidget {
  @override
  _MedPreCState createState() => _MedPreCState ();
}

class _MedPreCState extends State<MedPreC > {
  List<Widget> data = [];

  Widget CustomWidget() {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Container(
        width: double.infinity,
        height: 40,
        color: Colors.red,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Container(
            color: Colors.yellow,
            height: MediaQuery.of(context).size.height - 60,
            width: double.infinity,
            child: SingleChildScrollView(child: Column(children: data)),
          ),
        ],
      ),
      bottomNavigationBar: Container(
        height: 60,
        width: MediaQuery.of(context).size.width,
        color: Colors.white,
        child: InkWell(
          child: Center(
            child: Container(
                color: Colors.red,
                width: 100,
                height: 40,
                child: Center(child: Text("Add"))),
          ),
          onTap: () {
            setState(() {
              data.add(CustomWidget());
            });
          },
        ),
      ),
    );
  }
}

【讨论】：