如何解决在dart / Flutter中将List分成n个元素数组的组,并将其传递到Flutter中的相应小部件 以下代码用于显示列表内容
此代码用于通过传递列表来调用Widget。
var widgets1 = new List();
Random random = Random();
List<Widget> listWidgets(
String title,String url,String img,VoidCallback push) {
if(img == null){img="";}
return [
Column1(title: title,url: url,image: img,push: push),ColumnOneNew(title: title,Column2(title: title,img: img,Column3(title: title,push: push)
];
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: new Column(
children: <Widget>[
new Expanded(
child: new ListView.builder
(
controller: this._scrollController,itemCount: _list.length == null ? 0 : this._list.length + 1,itemBuilder: (BuildContext ctxt,int index) => buildBody(ctxt,index)
)
)
],)
);
}
Widget buildBody(BuildContext ctxt,int i) {
if (i < this._list.length) {
widgets1 = listWidgets(
_list[i].title,_list[i].src,_list[i].img,widget.push);
return widgets1[random.nextInt(4)];
} else {
return this.more(context);// return something else
}
}
以下代码用于显示列表内容
class Column3 extends StatefulWidget {
final String img;
final String url;
final String title;
VoidCallback push;
Column3({this.title,this.url,this.img,this.push});
@override
State<StatefulWidget> createState() {
return _Column3();
}
}
class _Column3 extends State<Column3> {
@override
Widget build(BuildContext context) {
return InkWell(
onTap: () {
widget.push();
Navigator.push(
context,MaterialPageRoute(
builder: (_) => new ExternalWidgetWithWebView(
url: widget.url,title: widget.title,)));
},child: Container(
child: GridView.count(
shrinkWrap: true,physics: NeverScrollableScrollPhysics(),crossAxisSpacing: 0.0,crossAxisCount: 3,childAspectRatio: MediaQuery.of(context).size.width / 600,children: new List<Widget>.generate(3,(index) {
return SafeArea(
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 2.0,horizontal: 5.0),child: Container(
child: Row(children: <Widget>[
Expanded(
child: Container(
width: MediaQuery.of(context).size.width * 0.5,decoration: BoxDecoration(
shape: BoxShape.rectangle,border: Border.all(
color: Colors.grey,width: 1,),child: Column(
crossAxisAlignment:
CrossAxisAlignment.stretch,children: <Widget>[
Container(
height: MediaQuery.of(context)
.size
.height *
0.15,width:
MediaQuery.of(context).size.width,decoration: BoxDecoration(
color: Colors.white,margin: EdgeInsets.all(5.0),child: Image.network(
widget.img,fit: BoxFit.fill,errorBuilder:
(BuildContext context,Object exception,StackTrace stackTrace) {
return new Row(
crossAxisAlignment: CrossAxisAlignment.center,mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[
new Text(
'No Image',style: new TextStyle(
fontSize: 16.0,fontFamily: 'Roboto',color: Colors.black
),)
],);
},)),Expanded(
child: Padding(
padding: EdgeInsets.symmetric(
horizontal: 5.0,child: Container(
height: MediaQuery.of(context)
.size
.height *
0.1,child: Text(
widget.title,style: TextStyle(fontSize: 8.0),textAlign: TextAlign.justify,])))
]))));
})),);
}
}
我要实现的是将数组拆分为3列3列显示,2列2列显示,并将其传递给相应的小部件。实际上,我希望列表将其内容显示为随机的列内容(一列,两列或3列)。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。