如何使用数据列表创建可滚动的水平卡视图
如何使用数据列表创建可滚动的水平卡视图
提问于 2019-01-03 11:39:49
我正在创建一个水平滚动卡视图。在硬视图中，我想设置图像和textview.The数据，在硬视图内将从list.Now获取如何设置在硬视图内的列表数据。
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: new Scaffold(
body: new SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
buildBody(),
productsCard()
],
),
),
)
);
}
Widget buildBody() {
return Stack(
// alignment: Alignment.bottomCenter,
children: <Widget> [
new Image(
image: new AssetImage('assets/homebg.png'),
),
Positioned(
left: 50.0,
right: 50.0,
bottom: 40.0,
height: 64.0,// adjust this if you want some padding
child: RaisedGradientButton(
onPressed: () {
Navigator.push(
context, MaterialPageRoute(builder: (context) => StylistPage()));
},
child: new Text("BOOK AN APPOINTMENT",
style: TextStyle(fontSize: 20.0, color: Colors.white),
),
gradient: LinearGradient(
colors: <Color>[const Color(0xFF000000),const Color(0xFF000000), const Color(0xFF40079B)],
),
), // child widget
),
]
);
}
Widget productsCard(){
return Container(
child: ListView(
scrollDirection: Axis.horizontal, // <-- Like so
children: <Widget>[
Container(
width: 160.0,
color: Colors.red,
),
Container(
width: 160.0,
color: Colors.blue,
),
Container(
width: 160.0,
color: Colors.green,
),
],
)
);
}//这是我的数据列表，我在列表的每一项中有四个值。
List<ProductsCollection> productData = []
..add(ProductsCollection('Discipline curl','https://sgdfgdgd/jdkjdhj.png/jashdghd',20,'akhsgdahghsgdh'))
..add(ProductsCollection('Discipline curl','https://sgdfgdgd/jdkjdhj.png/jashdghd',20,'akhsgdahghsgdh'))
..add(ProductsCollection('Discipline curl','https://sgdfgdgd/jdkjdhj.png/jashdghd',20,'akhsgdahghsgdh'));当我试图调用productsCard方法时，我无法看到screen.The屏幕中的任何小部件在代码之后出现为空白，而且cars的数量应该取决于列表中可用的值的数量。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-01-03 13:01:31
你的名单没有显示，因为你没有给它任何高度。将height添加到包装ListView的容器中。
要创建一个动态列表，您可以使用ListView.builder并在卡内显示数据，Column将帮助您。itemCount将建立productData.length数量的卡片。
Widget productsCard(){
return Container(
height: 200.0,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: productData.length,
itemBuilder: (BuildContext context, int i) =>
Card(
child: Container(
width: 160.0,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Text('Discipline curl'),
Text('https://sgdfgdgd/jdkjdhj.png/jashdghd'),
Text('20'),
Text('akhsgdahghsgdh')
],
),
),
),
)
);
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54021569
复制相关文章
相似问题
腾讯云开发者
