添加带有按钮的动态小部件

Question

当我试图向我的应用程序添加动态小部件时，我遇到了一个奇怪的错误。当按下添加按钮屏幕变成完全白色时，我不知道为什么会发生这种情况。我使用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();
},
),
],
));

谢谢你帮我。

Answer 1

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

Answer 2

在第一步中，我创建了一个名为CustomTextField 的Widget

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),
],
),
);
}
}

这个小部件给我一个文本显示提示和一个控制器控制文本字段

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

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)),
);
}
}

玩得开心