Flutter-单击添加新的小部件 [英] Flutter - Add new Widget on click
本文介绍了Flutter-单击添加新的小部件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是新手，我正在尝试构建一个非常简单的应用。
我有这个简单的代码（并且仍在进行中），每次用户单击按钮时，我都试图添加一个新的小部件。
这是我的代码：
class ResponsavelProfilePage扩展了StatefulWidget {
@override
_ResponsavelProfilePageState createState（）=>新的_ResponsavelProfilePageState（）;
}
类_ResponsavelProfilePageState扩展了State< ResponsavelProfilePage> {
int _count = 1;
@override
Widget build（BuildContext context）{
List< Widget> _contatos = new List.generate（_count，（int i）=> new ContactRow（））;
返回新的Scaffold（
appBar：new AppBar（
标题：new Text（GlobalConstants.appName），
），
正文：new LayoutBuilder（生成器：（上下文，约束）{
final _maxHeight =约束.biggest.height / 3;
final _biggerFont = TextStyle（fontSize：_maxHeight / 6）;
返回新的中心（
子项：new Column（
mainAxisAlignment：MainAxisAlignment.center，
子项：< Widget> [
new TextFormField（
装饰：new InputDecoration（
labelText：'Nome'，
），
），
新Container（
padding：new EdgeInsets.all（20.0），
），
new TextFormField（
装饰：new InputDecoration（
labelText：'Data de nascimento'，
），
），
新的Container（
padding：新的EdgeInsets.all（20.0），
），
的新Row（
的孩子：_contatos，
），
新的FlatButton（
onPressed：_addNewContactRow，
子级：new Icon（Icons.add），
），
//新的ContactRow（ ）
]，
），
）；
}）
）;
}
void _addNewContactRow（）{
setState（（）{
_count = _count + 1;
}）;
}
}
类ContactRow扩展了StatefulWidget {
@override
State< StatefulWidget> createState（）=>新的_ContactRow（）;
}
类_ContactRow扩展了State< ContactRow> {
@override
Widget build（BuildContext context）{
return new Container（
child：
new Column（
children：< Widget> [
new TextFormField（
装饰：new InputDecoration（
labelText：'Contato'，
），
），
new Text（ Tipo Contato： ），
新的DropdownButton（
值：_currentContactType，
项：_dropDownMenuItems，
onChanged：changedDropDownItem，
），
新的Container（
padding：new EdgeInsets.all（20.0），
），
]
）
）;
}
List _contactTypes =
[电话（SMS），电话（Whatsapp），电子邮件];
List< DropdownMenuItem< String>> _dropDownMenuItems;
字符串_currentContactType;
@override
void initState（）{
_dropDownMenuItems = getDropDownMenuItems（）;
_currentContactType = null;
super.initState（）;
}
List< DropdownMenuItem< String>> getDropDownMenuItems（）{
List< DropdownMenuItem< String>> items = new List（）;
表示（_contactTypes中的字符串城市）{
items.add（new DropdownMenuItem（
value：city，
child：new Text（city）
））;
}
退货商品；
}
无效changeDropDownItem（String selectedCity）{
setState（（）{
_currentContactType = selectedCity;
}）;
}
}
我想在用户单击时添加另一个ContactRow带有onPressed上的addNewContactRow（）的平面按钮。
我在addNewContactRow（）和List.generate部分的代码中找到了另一个问题，但是我无法使其工作。
可以
解决方案
只需用ListView替换Row。
结果：
代码：
import'package：flutter / material.dart';
void main（）=> runApp（
新MaterialApp（
主页：new ResponsavelProfilePage（），
），
）;
类ResponsavelProfilePage扩展了StatefulWidget {
@override
_ResponsavelProfilePageState createState（）=>
新的_ResponsavelProfilePageState（）;
}
类_ResponsavelProfilePageState扩展了State< ResponsavelProfilePage> {
int _count = 1;
@override
Widget build（BuildContext context）{
List< Widget> _contatos =
new List.generate（_count，（int i）=> new ContactRow（））;
返回新的Scaffold（
appBar：new AppBar（
标题：new Text（ NonstopIO），
），
正文：new LayoutBuilder（生成器：（上下文，约束）{
final _maxHeight =约束.biggest.height / 3;
final _biggerFont = TextStyle（fontSize：_maxHeight / 6）;
返回新的中心（
子项：new Column（
mainAxisAlignment：MainAxisAlignment.center，
子项：< Widget> [
new TextFormField（
装饰：new InputDecoration（
labelText：'Nome'，
），
），
新Container（
padding：new EdgeInsets.all（20.0），
），
new TextFormField（
装饰：new InputDecoration（
labelText：'Data de nascimento'，
），
），
新容器（
填充：新EdgeInsets.all（20.0），
），
新容器（
高度：200.0，
子级：新的ListView（
子级：_contatos，
滚动方向：Axis.horizontal，
），
），
新的FlatButton（
onPressed：_addNewContactRow，
孩子：new Icon（Icons.add），
），
//新的ContactRow（）
]，
），
）;
}））；
}
void _addNewContactRow（）{
setState（（）{
_count = _count + 1;
}）;
}
}
类ContactRow扩展了StatefulWidget {
@override
State< StatefulWidget> createState（）=>新的_ContactRow（）;
}
类_ContactRow扩展了State< ContactRow> {
@override
Widget build（BuildContext context）{
return new Container（
width：170.0，
padding：new EdgeInsets.all（5.0），
子项：new Column（子项：< Widget> [
new TextFormField（
装饰：new InputDecoration（
labelText：'Contato'，
），
），
新Text（ Tipo Contato：），
新DropdownButton（
值：_currentContactType，
项目：_dropDownMenuItems，
onChanged：changedDropDownItem，
），
新容器（
填充：new EdgeInsets.all（20.0），
），
]））；
}
List _contactTypes = [电话（SMS），电话（Whatsapp），电子邮件];
List< DropdownMenuItem< String>> _dropDownMenuItems;
字符串_currentContactType;
@override
void initState（）{
_dropDownMenuItems = getDropDownMenuItems（）;
_currentContactType = null;
super.initState（）;
}
List< DropdownMenuItem< String>> getDropDownMenuItems（）{
List< DropdownMenuItem< String>> items = new List（）;
表示（_contactTypes中的字符串城市）{
items.add（new DropdownMenuItem（value：city，child：new Text（city）））;
}
退货商品；
}
无效changeDropDownItem（String selectedCity）{
setState（（）{
_currentContactType = selectedCity;
}）;
}
}
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.
Here's my code:
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;
});
}
}
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.
Can some one please help?
解决方案
Just replace Row with ListView.
Also made few changes in Height/width check it out.
The Result : The Code :
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-单击添加新的小部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
