本文介绍了Flutter - 单击时添加新的小部件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是 Flutter 的新手，我正在尝试构建一个相当简单的应用程序.我有这个简单(仍在进行中)的代码，每次用户单击按钮时，我都会尝试添加一个新的小部件.
I'm new to flutter and I'm trying to build a rather simple app.I have this simple (and still in progress) code and I'm trying to add a new Widget every time the user clicks a button.
这是我的代码:
class ResponsavelProfilePage extends StatefulWidget {
@override
_ResponsavelProfilePageState createState() => new _ResponsavelProfilePageState();
}
class _ResponsavelProfilePageState extends State<ResponsavelProfilePage> {
int _count = 1;
@override
Widget build(BuildContext context) {
List<Widget> _contatos = new List.generate(_count, (int i) => new ContactRow());
return new Scaffold(
appBar: new AppBar(
title: new Text(GlobalConstants.appName),
),
body: new LayoutBuilder(builder: (context, constraint) {
final _maxHeight = constraint.biggest.height / 3;
final _biggerFont = TextStyle(fontSize: _maxHeight / 6);
return new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new TextFormField(
decoration: new InputDecoration(
labelText: 'Nome',
),
),
new Container(
padding: new EdgeInsets.all(20.0),
),
new TextFormField(
decoration: new InputDecoration(
labelText: 'Data de nascimento',
),
),
new Container(
padding: new EdgeInsets.all(20.0),
),
new Row(
children: _contatos,
),
new FlatButton(
onPressed: _addNewContactRow,
child: new Icon(Icons.add),
),
//new ContactRow()
],
),
);
})
);
}
void _addNewContactRow() {
setState(() {
_count = _count + 1;
});
}
}
class ContactRow extends StatefulWidget {
@override
State<StatefulWidget> createState() => new _ContactRow();
}
class _ContactRow extends State<ContactRow> {
@override
Widget build(BuildContext context) {
return new Container(
child:
new Column(
children: <Widget>[
new TextFormField(
decoration: new InputDecoration(
labelText: 'Contato',
),
),
new Text("Tipo Contato: "),
new DropdownButton(
value: _currentContactType,
items: _dropDownMenuItems,
onChanged: changedDropDownItem,
),
new Container(
padding: new EdgeInsets.all(20.0),
),
]
)
);
}
List _contactTypes =
["Phone (SMS)", "Phone (Whatsapp)", "Email"];
List<DropdownMenuItem<String>> _dropDownMenuItems;
String _currentContactType;
@override
void initState() {
_dropDownMenuItems = getDropDownMenuItems();
_currentContactType = null;
super.initState();
}
List<DropdownMenuItem<String>> getDropDownMenuItems() {
List<DropdownMenuItem<String>> items = new List();
for (String city in _contactTypes) {
items.add(new DropdownMenuItem(
value: city,
child: new Text(city)
));
}
return items;
}
void changedDropDownItem(String selectedCity) {
setState(() {
_currentContactType = selectedCity;
});
}
}
当用户单击带有 onPressed 上的 addNewContactRow() 的平面按钮时，我想添加另一个 ContactRow.我在 addNewContactRow() 上找到了代码，在另一个问题上找到了 List.generate 部分，但我无法让它工作.
I want to add another ContactRow when the user clicks that Flat Button with addNewContactRow() on onPressed.I've found the code on addNewContactRow() and the List.generate part on another question here, but I can't make it work.
有人可以帮忙吗?
推荐答案
只需将 Row 替换为 ListView 即可.
Just replace Row with ListView.
还对高度/宽度做了一些改动，看看吧.
Also made few changes in Height/width check it out.
结果:代码:
import 'package:flutter/material.dart';
void main() => runApp(
new MaterialApp(
home: new ResponsavelProfilePage(),
),
);
class ResponsavelProfilePage extends StatefulWidget {
@override
_ResponsavelProfilePageState createState() =>
new _ResponsavelProfilePageState();
}
class _ResponsavelProfilePageState extends State<ResponsavelProfilePage> {
int _count = 1;
@override
Widget build(BuildContext context) {
List<Widget> _contatos =
new List.generate(_count, (int i) => new ContactRow());
return new Scaffold(
appBar: new AppBar(
title: new Text("NonstopIO"),
),
body: new LayoutBuilder(builder: (context, constraint) {
final _maxHeight = constraint.biggest.height / 3;
final _biggerFont = TextStyle(fontSize: _maxHeight / 6);
return new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new TextFormField(
decoration: new InputDecoration(
labelText: 'Nome',
),
),
new Container(
padding: new EdgeInsets.all(20.0),
),
new TextFormField(
decoration: new InputDecoration(
labelText: 'Data de nascimento',
),
),
new Container(
padding: new EdgeInsets.all(20.0),
),
new Container(
height: 200.0,
child: new ListView(
children: _contatos,
scrollDirection: Axis.horizontal,
),
),
new FlatButton(
onPressed: _addNewContactRow,
child: new Icon(Icons.add),
),
//new ContactRow()
],
),
);
}));
}
void _addNewContactRow() {
setState(() {
_count = _count + 1;
});
}
}
class ContactRow extends StatefulWidget {
@override
State<StatefulWidget> createState() => new _ContactRow();
}
class _ContactRow extends State<ContactRow> {
@override
Widget build(BuildContext context) {
return new Container(
width: 170.0,
padding: new EdgeInsets.all(5.0),
child: new Column(children: <Widget>[
new TextFormField(
decoration: new InputDecoration(
labelText: 'Contato',
),
),
new Text("Tipo Contato: "),
new DropdownButton(
value: _currentContactType,
items: _dropDownMenuItems,
onChanged: changedDropDownItem,
),
new Container(
padding: new EdgeInsets.all(20.0),
),
]));
}
List _contactTypes = ["Phone (SMS)", "Phone (Whatsapp)", "Email"];
List<DropdownMenuItem<String>> _dropDownMenuItems;
String _currentContactType;
@override
void initState() {
_dropDownMenuItems = getDropDownMenuItems();
_currentContactType = null;
super.initState();
}
List<DropdownMenuItem<String>> getDropDownMenuItems() {
List<DropdownMenuItem<String>> items = new List();
for (String city in _contactTypes) {
items.add(new DropdownMenuItem(value: city, child: new Text(city)));
}
return items;
}
void changedDropDownItem(String selectedCity) {
setState(() {
_currentContactType = selectedCity;
});
}
}
这篇关于Flutter - 单击时添加新的小部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！