Question

我一直在尝试使卡片像标签中所示的标签一样可滑动。我已经添加了代码和模拟以供参考。

代码：

Container(
              margin: EdgeInsets.only(top: 35),
              child: Center(
                child: Card(
                  child: InkWell(
                    // splashColor: Colors.blue.withAlpha(30),
                    onTap: () {
                      print('Card tapped.');
                    },
                    child: Container(
                      width: 300,
                      height: 450,
                      padding: EdgeInsets.all(30),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          Text(
                            '3 month Test Pass',
                            style: TextStyle(
                                fontSize: 23, fontWeight: FontWeight.bold),
                          ),
                          Container(
                            margin: EdgeInsets.only(top: 10),
                            child: Text(
                              '50% off for early Birds',
                              style: TextStyle(
                                  color: Colors.black54, fontSize: 16),
                            ),
                          ),
                          Container(
                            margin: EdgeInsets.only(top: 40),
                            child: Text(
                              'INR 49/month',
                              style: TextStyle(
                                  fontSize: 21, fontWeight: FontWeight.bold),
                            ),
                          ),
                          Container(
                            margin: EdgeInsets.only(top: 7),
                            child: Text(
                              'INR 147 for 90 days',
                              style: TextStyle(
                                  color: Colors.black54,
                                  fontSize: 16,
                                  fontWeight: FontWeight.bold),
                            ),
                          ),
                          Container(
                            margin: EdgeInsets.only(top: 30),
                            child: Text(
                              'New live exam every Monday',
                              style: TextStyle(
                                color: Colors.black87,
                                fontSize: 16,
                              ),
                            ),
                          ),
                          Container(
                            margin: EdgeInsets.only(top: 15),
                            child: Text(
                              'Unlimited practise tests series',
                              style: TextStyle(
                                color: Colors.black87,
                                fontSize: 16,
                              ),
                            ),
                          ),
                          Container(
                            margin: EdgeInsets.only(top: 15),
                            child: Text(
                              'Paper tailored by AI for you',
                              style: TextStyle(
                                color: Colors.black87,
                                fontSize: 16,
                              ),
                            ),
                          ),
                          Container(
                            margin: EdgeInsets.only(top: 15),
                            child: Text(
                              'Solved previous year questions',
                              style: TextStyle(
                                color: Colors.black87,
                                fontSize: 16,
                              ),
                            ),
                          ),
                          Container(
                            margin: 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,
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              ),
            )

这是一个只显示一张卡片的容器，该卡片被添加到Scaffold主体的Column数组中。

想法是拥有可水平滑动的卡片，以使用户看到计划。

我是Flutter的初学者。

Answer 1

您可以使用ListView，然后将滚动方向设置为水平

只需将所有容器/卡片放在列表视图中

示例：

ListView(
            scrollDirection: Axis.horizontal,
            children: <Widget>[
              Container(
                width: 160.0,
                color: Colors.red,
              ),
              Container(
                width: 160.0,
                color: Colors.blue,
              ),
              Container(
                width: 160.0,
                color: Colors.green,
              ),
              Container(
                width: 160.0,
                color: Colors.yellow,
              ),
              Container(
                width: 160.0,
                color: Colors.orange,
              ),
            ],
          ),

参考

ListView - horizontal

如何使卡片像标签中的标签一样滑动？

1 个答案: