如何在滚动方向为水平时显示ListView的设置中间子项?

问题描述 投票:0回答:1

所以,我试图显示价格卡。

这里的想法是将它们显示为水平可滚动,所以我使用listView并设置了scrollDirection: Axis.horizontal,但是,现在,当它呈现时,它显示第一个孩子处于奇怪的位置。

mine result

因此,我正在尝试是否可以在屏幕上而不是第一个显示中间的孩子。就像这里显示的一样:enter image description here

此外,是否可以从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个。因此显示中间的一个。

flutter flutter-layout
1个回答
0
投票

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],
            ),
          );
        },
      ),
    );
  }
}
热门问题
推荐问题
最新问题