我的设计是这样的:
我一直在阅读GridView
,发现它足够复杂以获得结果。我也在这里关注这个问题:Flutter - Layout a Grid。发现这是针对固定列表,加上列表有不同的UI。
我有来自API的信息,我有一个名为MoreInfo()
的小部件,它有一个从API传递的文本参数。
我已经实现了我想从列表中获取字符串的内容。只是我试图得到结果,但没有给出结果非常好。
将列表添加到窗口小部件:
GridView getOtherInfo(BuildContext context){
List<String> _yesElems = [];
List<Widget> _widget = [];
this.userBarModel.barModel.otherInfo.yes.forEach((item){
_yesElems.add(item);
});
_yesElems.forEach((o){
_widget.add(MoreInfoWidget(text: o));
});
return GridView.count(
crossAxisCount: 4,
children: _widget
);
}
UI代码:
Column(
corssAxisalignment: CrossAxisAlignment.stretch;
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 9.0),
child: Text("MORE INFO",
style: TextStyle(color: Color.fromRGBO(183, 193, 203, 1), fontWeight: FontWeight.bold, fontSize: 11.0))
),
SizedBox(height: 11.4),
Container(
height: 140,
child: getOtherInfo(context)
)
]
)
我现在得到的结果是:
我想得到上述结果。 UI中添加了内置的顶部填充。我不知道为什么。伙计们,你能帮助我吗?
我尝试过使用crossAixCount: 2
,UI空白。任何帮助,将不胜感激。谢谢 :)
也许我没有得到你,你能不能尝试一下这个代码,它会给你一个如何按照自己的方式做到的提示,让我知道这是不是你想要的。
List<int> _list = [];
math.Random random = math.Random();
@override
void initState() {
super.initState();
Timer.periodic(Duration(milliseconds: 1000), (timer) {
_list.add(random.nextInt(100));
setState(() {});
});
}
Widget build(context) {
return Scaffold(
appBar: AppBar(),
body: GridView.count(
crossAxisCount: 2,
crossAxisSpacing: 160,
childAspectRatio: 3,
children: _list.map((value) {
return Container(
alignment: Alignment.center,
margin: EdgeInsets.all(8),
decoration: BoxDecoration(border: Border.all(color: Colors.black),),
child: Text("Item ${value}"),
);
}).toList(),
),
);
}