时间戳

首页 > 解决方案 > 当滚动方向为水平时，如何显示设置的 ListView 的中间孩子？

flutter - 当滚动方向为水平时，如何显示设置的 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 岁。因此要显示中间的。

标签： flutterflutter-layout

解决方案

示例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],
            ),
          );
        },
      ),
    );
  }
}

推荐阅读