[英]How to add the widgets dynamically to column in Flutter?
我在ListView
添加了一些小部件。 這樣我就可以滾動所有小部件。 現在我需要ListView
添加一個小部件以加載評論列表。 我無法在ListView
添加ListView
。 此外,我的評論不需要單獨的滾動條。 它應該與ListView
內的小部件一起滾動。 所以我計划添加Column
而不是ListView
。 在Columns
動態添加我的評論有什么幫助嗎?
new Expanded(
child:
new ListView(
shrinkWrap: true,
children: <Widget>[
// Title
new Padding(padding: const EdgeInsets.only(
top: 10.00, left: 10.00),
child: new Text(
_feed.title, textAlign: TextAlign.start,),
),
// content
new Container(
child: new Text(
_feed.content, textAlign: TextAlign.start,),
),
// Comments List will go here
],
),
),
如果您已經有評論數據,只需創建一個 List,然后將其傳遞給Column
的children
屬性。 就像是:
var commentWidgets = List<Widget>();
for (var comment in comments) {
commentWidgets.Add(Text(comment.text)); // TODO: Whatever layout you need for each widget.
}
…
new Expanded(
child:
new ListView(
shrinkWrap: true,
children: <Widget>[
// Title
new Padding(padding: const EdgeInsets.only(
top: 10.00, left: 10.00),
child: new Text(
_feed.title, textAlign: TextAlign.start,),
),
// content
new Container(
child: new Text(
_feed.content, textAlign: TextAlign.start,),
),
// Comments List will go here
Column(children: commentWidgets,),
],
),
),
如果您還沒有評論數據並且需要獲取它,請在未來完成后使用FutureBuilder構建 UI。
通過維護對Column
對象的引用,可以在聲明Column
對象后引用.children
字段/屬性 - 如下所示:
Column someColumn = Column(
children: [],
);
someColumn.children.add(Text('Hello 123'));
目前(2021-06),Flutter 2.x 實現了 null-safe。 @Gene Bo 的答案應該有效,但幾乎不需要修改。
這應該有效。
var pwdWidgets = <Widget>[];
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: this.pwdWidgets,
),
ElevatedButton(
onPressed: (){
setState((){
this.pwdWidgets.add(Text("Hello World"),);
});
},
child: Text("click me"),
),
除了@Derek Lakin 的答案也對我有用之外,如果您需要更新評論並重新加載,還需要調用setState()
。
var commentWidgets = List<Widget>();
for (var comment in comments) {
commentWidgets.Add(Text(comment.text)); // TODO: Whatever layout you need foreach widget.
}
setState(() {
});
其它的辦法:
return Column(
children: [
for(String item in list) Text(item);
]);
在這種情況下,您還可以輕松混合靜態和動態字段:
return Column(
children: [
for(String item in list) Text(item),
Text("Static text control"),
]);
import 'package:flutter/material.dart';
class LoginRegisterPage extends StatefulWidget {
@override
_LoginRegisterPageState createState() => _LoginRegisterPageState();
}
class _LoginRegisterPageState extends State<LoginRegisterPage> {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text("App"),
),
body: new Container(
margin: EdgeInsets.all(15.0),
child: new Form(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: createInputs() + createButtons(),
),
),
),
);
}
List<Widget> createInputs(){
return{
SizedBox(height: 10.0),
logo(),
SizedBox(height: 20.0),
new TextFormField(
decoration: new InputDecoration(labelText: 'Email'),
),
SizedBox(height: 10.0),
new TextFormField(
decoration: new InputDecoration(labelText: 'Passwors')
),
SizedBox(height: 20.0),
};
}
Widget logo(){
return new Hero(
tag:'hero',
child: new CircleAvatar(
backgroundColor:Colors.transparent,
radius: 110.0,
child: Image.asset("images\logo.PNG"),
),
);
}
List<Widget> createButtons(){
return{
new RaisedButton(
child: new Text("Login", style: new TextStyle(fontSize: 20.0),),
textColor: Colors.pink,
onPressed: () {
},
),
new FlatButton(
child: new Text("Already not have an account?", style: new TextStyle(fontSize: 14.0),),
textColor: Colors.white,
onPressed: () {
},
)
};
}
}
是的,您可以在列小部件上添加動態子項。
class CategoriesItemWidget extends StatelessWidget {
final List<String> list;
const CategoriesItemWidget({Key? key, required this.list})
: super(key: key);
@override
Widget build(BuildContext context) {
return Column(
children: list
.map((string) => Text(string))
.toList(),
);
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.