[英]How to dynamically append to the children of a Column widget in Flutter
Flutter 是一个相当新的框架,因此对简单任务没有太多帮助。 我特别要问的是如何将 Card 小部件添加到 Column 小部件。 下面提供了源代码以帮助解释我的意思。
假设我有一个创建新卡的函数,如下所示:
buildRow(barcode, letter, name, price) {
return new Card(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
new ListTile(
leading: new CircleAvatar(
child: new Text(letter),
),
title: new Text(name),
subtitle: new Text("\$" + price),
trailing: new Text(
"x1",
style: new TextStyle(color: Colors.lightBlue),
textScaleFactor: 1.2,
),
),
],
),
);
}
var snack = buildRow("091918229292", "C", "Crackers", "\$4.00");
var fruit = buildRow("091928229292", "P", "Pomegranate", "\$2.00");
var juice = buildRow("091948229292", "K", "Kiwi Juice", "\$20.00");
我有以下屏幕/页面:
class Home extends StatefulWidget {
@override
HomePage createState() => new HomePage();
}
class HomePage extends State<Home> {
@override
Widget build(BuildContext context) {
return new Column(children: <Widget>[
]);
}
}
假设提供的所有代码都在同一个文件中。 如何在主屏幕上的列小部件的子项中添加“小吃”、“水果”和“果汁”?
如果您手动更新源,这是一个基本示例。
Column(
children: _createChildren(),
)
///////
这是创建您提供给您的列的小部件列表的方法
List<int> someList = [1, 2, 3, 4, 5];
List<Widget> _createChildren() {
return new List<Widget>.generate(someList.length, (int index) {
return Text(someList[index].toString());
});
}
//////
因此,当您更新列表时,请在setState
void _somethingHappens() {
setState(() {
someList.add(6);
});
}
现在,如果您从流接收数据,则可以检查StreamBuilder
,或者如果它来自Future
,则可以使用FutureBuilder
。
这个例子也可以在普通的Builder
好的,我已经解决了我的问题,我所做的是创建一个新列表,如下所示:
List<Widget> v = [];
并将这个列表作为身体的孩子,如下所示:
class HomePage extends State<Home> {
@override
Widget build(BuildContext context) {
return new Column(children: v);
}
}
之后我创建了一个函数来附加如下:
buildRow(barcode, letter, name, price) {
v.add(new Card(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
new ListTile(
leading: new CircleAvatar(
child: new Text(letter),
),
title: new Text(name),
subtitle: new Text("\$" + price),
trailing: new Text(
"x1",
style: new TextStyle(color: Colors.lightBlue),
textScaleFactor: 1.2,
),
),
],
),
));
}
最后我使用 setState 函数将更改应用于屏幕。
在列中,您可以通过这样的地图添加子项:
Column(
children: List<Widget>.generate(length, (index) {
return Container(
child: Text('$index')
);
})
)
class SearchCat extends StatelessWidget {
final List<Widget> list;
final ValueChanged onChange;
SearchCat({this.list, this.onChange}): super();
@override
Widget build(BuildContext context) {
return Container(
child: Row(
children: list.map((v) {
return Container(
child: v,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(57.0),
border: Border.all(width: 1.0, color: const Color(0xff707070)),
),
);
}).toList()
)
);
}
}
我们可以使用 List.map 来填充小部件列表。
以下是如何使用它的示例。
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SearchCat(list: [
Text('Hello, World!', style: Theme.of(context).textTheme.headline4),
Text('Hello, World!', style: Theme.of(context).textTheme.headline4),
Text('Hello, World!', style: Theme.of(context).textTheme.headline4),
]
);
}
}
您可以将其粘贴到 ( Flutter Dartpad
你应该能够做这样的事情:
class HomePage extends State<Home> {
@override
Widget build(BuildContext context) {
return new Column(children: <Widget>[
buildRow("091918229292", "C", "Crackers", "\$4.00"),
buildRow("091928229292", "P", "Pomegranate", "\$2.00"),
buildRow("091948229292", "K", "Kiwi Juice", "\$20.00"),
]);
}
}
如果您真的想保留参考资料,您可以这样做:
class HomePage extends State<Home> {
var snack;
var fruit;
var juice;
@override
void initState() {
super.initState();
snack = buildRow("091918229292", "C", "Crackers", "\$4.00");
fruit = buildRow("091928229292", "P", "Pomegranate", "\$2.00");
juice = buildRow("091948229292", "K", "Kiwi Juice", "\$20.00");
}
@override
Widget build(BuildContext context) {
return new Column(children: <Widget>[
snack,
fruit,
juice,
]);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.