当滚动方向为水平时，如何显示ListView的设置中间子级？
所以，我试图显示价格卡。
这里的想法是将它们显示为可水平滚动，因此我使用listView并设置了scrollDirection: Axis.horizontal，但是，
现在，当它呈现时，它显示第一个孩子处于奇怪的位置。
因此，我正在尝试是否可以在屏幕上而不是第一个显示中间的孩子。就像这里显示的一样：
此外，是否可以为ListView的子级增加更多的边距？或其他任何方式。
以下是我的代码：
Container _priceCard() {
return Container(
margin: new EdgeInsets.only(top: 35),
height: 480,
child: ListView(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
children: <Widget>[
Card(
child: InkWell(
// splashColor: Colors.blue.withAlpha(30),
onTap: () {
print('Card tapped.');
},
child: Container(
width: 300,
height: 450,
padding: new EdgeInsets.all(30),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
'3 month Test Pass',
style:
TextStyle(fontSize: 23, fontWeight: FontWeight.bold),
),
Container(
margin: new EdgeInsets.only(top: 10),
child: Text(
'50% off for early Birds',
style: TextStyle(color: Colors.black54, fontSize: 16),
),
),
Container(
margin: new EdgeInsets.only(top: 40),
child: Text(
'INR 49/month',
style: TextStyle(
fontSize: 21, fontWeight: FontWeight.bold),
),
),
Container(
margin: new EdgeInsets.only(top: 7),
child: Text(
'INR 147 for 90 days',
style: TextStyle(
color: Colors.black54,
fontSize: 16,
fontWeight: FontWeight.bold),
),
),
Container(
margin: new EdgeInsets.only(top: 30),
child: Text(
'New live exam every Monday',
style: TextStyle(
color: Colors.black87,
fontSize: 16,
),
),
),
Container(
margin: new EdgeInsets.only(top: 15),
child: Text(
'Unlimited practise tests series',
style: TextStyle(
color: Colors.black87,
fontSize: 16,
),
),
),
Container(
margin: new EdgeInsets.only(top: 15),
child: Text(
'Paper tailored by AI for you',
style: TextStyle(
color: Colors.black87,
fontSize: 16,
),
),
),
Container(
margin: new EdgeInsets.only(top: 15),
child: Text(
'Solved previous year questions',
style: TextStyle(
color: Colors.black87,
fontSize: 16,
),
),
),
Container(
margin: new EdgeInsets.only(top: 35),
child: RaisedButton(
padding: const EdgeInsets.only(
top: 10, bottom: 10, left: 40, right: 40),
textColor: Colors.black,
color: Colors.green,
child: Text(
'Buy Now',
style: TextStyle(fontSize: 20),
),
onPressed: null,
),
),
],
),
),
),
),
Card(
child: InkWell(
// splashColor: Colors.blue.withAlpha(30),
onTap: () {
print('Card tapped.');
},
child: Container(
width: 300,
height: 450,
padding: new EdgeInsets.all(30),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
'3 month Test Pass',
style:
TextStyle(fontSize: 23, fontWeight: FontWeight.bold),
),
Container(
margin: new EdgeInsets.only(top: 10),
child: Text(
'50% off for early Birds',
style: TextStyle(color: Colors.black54, fontSize: 16),
),
),
Container(
margin: new EdgeInsets.only(top: 40),
child: Text(
'INR 49/month',
style: TextStyle(
fontSize: 21, fontWeight: FontWeight.bold),
),
),
Container(
margin: new EdgeInsets.only(top: 7),
child: Text(
'INR 147 for 90 days',
style: TextStyle(
color: Colors.black54,
fontSize: 16,
fontWeight: FontWeight.bold),
),
),
Container(
margin: new EdgeInsets.only(top: 30),
child: Text(
'New live exam every Monday',
style: TextStyle(
color: Colors.black87,
fontSize: 16,
),
),
),
Container(
margin: new EdgeInsets.only(top: 15),
child: Text(
'Unlimited practise tests series',
style: TextStyle(
color: Colors.black87,
fontSize: 16,
),
),
),
Container(
margin: new EdgeInsets.only(top: 15),
child: Text(
'Paper tailored by AI for you',
style: TextStyle(
color: Colors.black87,
fontSize: 16,
),
),
),
Container(
margin: new EdgeInsets.only(top: 15),
child: Text(
'Solved previous year questions',
style: TextStyle(
color: Colors.black87,
fontSize: 16,
),
),
),
Container(
margin: new EdgeInsets.only(top: 35),
child: RaisedButton(
padding: const EdgeInsets.only(
top: 10, bottom: 10, left: 40, right: 40),
textColor: Colors.black,
color: Colors.green,
child: Text(
'Buy Now',
style: TextStyle(fontSize: 20),
),
onPressed: null,
),
),
],
),
),
),
),
Card(
child: InkWell(
// splashColor: Colors.blue.withAlpha(30),
onTap: () {
print('Card tapped.');
},
child: Container(
width: 300,
height: 450,
padding: new EdgeInsets.all(30),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
'3 month Test Pass',
style:
TextStyle(fontSize: 23, fontWeight: FontWeight.bold),
),
Container(
margin: new EdgeInsets.only(top: 10),
child: Text(
'50% off for early Birds',
style: TextStyle(color: Colors.black54, fontSize: 16),
),
),
Container(
margin: new EdgeInsets.only(top: 40),
child: Text(
'INR 49/month',
style: TextStyle(
fontSize: 21, fontWeight: FontWeight.bold),
),
),
Container(
margin: new EdgeInsets.only(top: 7),
child: Text(
'INR 147 for 90 days',
style: TextStyle(
color: Colors.black54,
fontSize: 16,
fontWeight: FontWeight.bold),
),
),
Container(
margin: new EdgeInsets.only(top: 30),
child: Text(
'New live exam every Monday',
style: TextStyle(
color: Colors.black87,
fontSize: 16,
),
),
),
Container(
margin: new EdgeInsets.only(top: 15),
child: Text(
'Unlimited practise tests series',
style: TextStyle(
color: Colors.black87,
fontSize: 16,
),
),
),
Container(
margin: new EdgeInsets.only(top: 15),
child: Text(
'Paper tailored by AI for you',
style: TextStyle(
color: Colors.black87,
fontSize: 16,
),
),
),
Container(
margin: new EdgeInsets.only(top: 15),
child: Text(
'Solved previous year questions',
style: TextStyle(
color: Colors.black87,
fontSize: 16,
),
),
),
Container(
margin: new EdgeInsets.only(top: 35),
child: RaisedButton(
padding: const EdgeInsets.only(
top: 10, bottom: 10, left: 40, right: 40),
textColor: Colors.black,
color: Colors.green,
child: Text(
'Buy Now',
style: TextStyle(fontSize: 20),
),
onPressed: null,
),
),
],
),
),
),
),
],
),
);
}
当前，孩子是相同的。另外，目前，我的孩子将只有3个。因此显示中间的一个。
1 个答案:
答案 0 :(得分：1)
PageView
class SO extends StatefulWidget {
@override
_SOState createState() => _SOState();
}
class _SOState extends State<SO> {
var colors = [Colors.red, Colors.pink, Colors.yellow, Colors.green];
PageController _controller;
@override
void initState() {
super.initState();
_controller = PageController(viewportFraction: .9,initialPage: 1);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
backgroundColor: Colors.blue,
body: PageView.builder(
controller: _controller,
itemCount: colors.length,
itemBuilder: (BuildContext context, int index) {
return Container(
margin: EdgeInsets.symmetric(horizontal: 8, vertical: 8),
child: Card(
color: colors[index],
),
);
},
),
);
}
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？