使用按钮添加动态小部件答案

【问题标题】：Adding dynamic widget with button使用按钮添加动态小部件
【发布时间】：2020-11-25 07:10:20
【问题描述】：

当我尝试将动态小部件添加到我的应用程序时，我遇到了一个奇怪的错误。当按下添加按钮屏幕变成完全白色时，我找不到它发生的原因。我使用https://www.youtube.com/watch?v=xPW1vtDDlt4 作为资源我在 Flutter 上真的很新，也许我忘记了要添加的东西，但我检查了很多次。这是我的代码，

class DynamicWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: new TextField(
        decoration: new InputDecoration(hintText: 'Press + to Add Field'),
      ),
    );
  }
}

列表的初始化。

  List<DynamicWidget> listDynamic = [];

我的功能是将小部件添加到列表中。

  addDynamic() {
    listDynamic.add(new DynamicWidget());
    print("addDynamic");
    setState(() {});
  }

我不确定，但问题可能在这里，

final testText = Visibility(
  child: new Column(
    children: <Widget>[
      new Flexible(
        child: new ListView.builder(
          itemCount: listDynamic.length,
          itemBuilder: (_, index) => listDynamic[index],
        ),
      ),
    ],
  ),
);

在这里我调用我的小部件，我在这里将它声明为变量。

final body = Container(
      child: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            testText,
            strPhoto
          ],
        ),
      ),
    );

最后是我的按钮。

    return Scaffold(
        appBar: new AppBar(title: new Text(device_type), centerTitle: true),
        drawer: Menu(),
        body: body,
        floatingActionButton: Column(
          crossAxisAlignment: CrossAxisAlignment.end,
          mainAxisAlignment: MainAxisAlignment.end,
          children: <Widget>[
            FloatingActionButton(
              heroTag: null,
              child: Icon(
                Icons.add,
                color: Colors.white,
              ),
              onPressed: () {
                addDynamic();
              },
            ),
          ],
        ));

谢谢你帮助我。

【问题讨论】：

所有这些代码块都在一个文件中吗？如果所有这些都在一个文件中，请更新您的问题，将所有这些代码块提供到一个代码块中。因为你的函数，testText 和其他函数在哪里可能有问题。
我知道哪个代码块在做什么。但我要求将所有这些都放在一个代码块中。因为您的代码形成可能有问题。我已经复制了所有这些代码。但我不能跑。它在SingleChildScrollView 中显示错误。因此，如果您将它们全部放在一个代码块中，将会很有帮助。

标签： android flutter dart mobile cross-platform

【解决方案1】：

您必须创建变量 Widget 并添加到 Build Context on Scaffold

【讨论】：

你能举个例子吗？

【解决方案2】：

在第一步中，我创建了一个名为 CustomTextField 的小部件

import 'package:flutter/material.dart';

class CustomTextField extends StatelessWidget {
final String hint;
final TextEditingController controllers;

CustomTextField(this.hint, this.controllers);

    @override
    Widget build(BuildContext context) {
    return Padding(
        padding: EdgeInsets.only(top: 2.0, left: 6.0, right: 6.0, bottom: 2.0),
        child: Column(
          children: <Widget>[
            TextField(
                decoration: InputDecoration(hintText: hint),
                controller: controllers),
            SizedBox(height: 4.0),
          ],
        ),
      );
    }
}

这个小部件给我一个用于在提示上显示的文本和一个用于控制文本字段的控制器

在下一步中，我以这种方式更改主页类我有自定义文本字段（我的小部件）列表并使用构建方法的映射列表显示在列表视图上

import 'package:flutter/material.dart';
import 'CustomTextField.dart';

class PageTutorial extends StatefulWidget {
  @override
  _PageTutorialState createState() => _PageTutorialState();
}

class _PageTutorialState extends State<PageTutorial> {
  List<CustomTextField> widgets = [
    CustomTextField("UserName", TextEditingController())
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: widgets.map<Widget>((widget) => widget).toList(),
      ),
      floatingActionButton: FloatingActionButton(
          onPressed: () {
            setState(() {
              widgets.add(CustomTextField("Password", TextEditingController()));
            });
          },
          child: Icon(Icons.add)),
    );
  }
}

玩得开心

【讨论】：