当 OnTap() 被触发时创建另一个 Widget

Question

有谁知道在触发OnTap()时如何在Flutter中生成一个新的widget？

就我而言，我想在按下列图标时在容器内创建一个新列。

图标用 InkWell() 包裹。

InkWell(
  onTap: () {
    print("Create Column in another Container");
  },
  child: Column(
    children: const [
      Icon(
        Icons.view_agenda,
        color: iconGreyColor,
        size: 20.0,
      ),
    ],
  ),
),

Goal 关闭看起来像这样。

    Container(child: Column(children:[]),)

Answer 1

在OnTap()里面，你可以传递一个可以创建Widget的函数。

例如

    Widget buildContainer(){ return Container(child: Text("Stack Overflow"))}

在构建方法之前插入此函数，然后在 OnTap() 事件期间调用它。当然，您可以根据您的具体要求修改 Container。

这里要理解的重要一点是，您可以创建任何允许的 return 类型的函数，甚至是特定的 Widget，这在您想要创建多个相同的 widget 时特别有用，因为它减少了冗余代码.

Answer 2

您可以使用 StatefulWidget() 来实现。在 StatefulWidget() 构建之外和 InkWell() 中创建一个 List<Widget> 追加要添加的新 Widget() 并调用 setState((){})

class YellowBird extends StatefulWidget {
  const YellowBird({Key? key}) : super(key: key);

@override
  State<YellowBird> createState() => _YellowBirdState();
}

class _YellowBirdState extends State<YellowBird> {
List<Widget> myWidgetList = [
  Text("hello"),
];
@override
Widget build(BuildContext context) {
  return Column(
    children: [
      InkWell(
        onTap: () {
          print("Create Column in another Container");
          myWidgetList.add(Text("hello 2"));
          setState(() {});
        },
        child: Column(
          children: const [
            Icon(
              Icons.view_agenda,
              size: 20.0,
            ),
          ],
        ),
      ),
      Column(
        children: myWidgetList,
      ),
    ],
  );
 }
}

您可以在此处运行相同的代码 Link

Answer 3

主要部分：

...widget.widgets -> spread operator 。每当 ontap pressed.the 数组将获取新元素并设置状态时，将更新小部件。

InkWell(
              onTap: () {
                setState(() {
                  widget.widgets.add(Container(
                    height: 49,
                    child: new Column(
                      children: [
                        Text(
                          "hi",
                          style: TextStyle(fontSize: 40),
                        )
                      ],
                    ),
                  ));
                });
                print("Create Column in another Container");
              },
              child: Column(
                children: const [
                  Icon(
                    Icons.view_agenda,
                    size: 20.0,
                  ),
                ],
              ),
            )

 Container(
        margin: EdgeInsets.only(
          left: 10.0,
          right: 10.0,
        ),
        height: MediaQuery.of(context).size.height - 150,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [...widget.widgets],
        ),
      )

示例代码

void main() => runApp(MyHomePage());

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Page0(),
    );
  }
}

class Page0 extends StatefulWidget {
  final widgets = [];

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

class _Page0State extends State<Page0> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: [
          SizedBox(
            height: 25.0,
          ),
          Center(
              child: Text(
            "macintosh_app",
            style: TextStyle(fontSize: 48),
          )),
          SizedBox(
            height: 50.0,
          ),
          Center(
            child: InkWell(
              onTap: () {
                setState(() {
                  widget.widgets.add(Container(
                    height: 49,
                    child: new Column(
                      children: [
                        Text(
                          "hi",
                          style: TextStyle(fontSize: 40),
                        )
                      ],
                    ),
                  ));
                });
                print("Create Column in another Container");
              },
              child: Column(
                children: const [
                  Icon(
                    Icons.view_agenda,
                    size: 20.0,
                  ),
                ],
              ),
            ),
          ),
          SizedBox(
            height: 25.0,
          ),
          Container(
            margin: EdgeInsets.only(
              left: 10.0,
              right: 10.0,
            ),
            height: MediaQuery.of(context).size.height - 150,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [...widget.widgets],
            ),
          ),
        ],
      ),
    );
  }
}

当 OnTap() 被触发时创建另一个 Widget

Create another Widget when OnTap() is treiggered

dart

flutter

flutter-layout