如何使卡片像颤动的标签一样可滑动？ [复制]

Posted 2023-02-23

【中文标题】如何使卡片像颤动的标签一样可滑动？ [复制]

【英文标题】：How to make cards swipeable like tabs in flutter? [duplicate]

【发布时间】：2020-03-05 00:38:43

【问题描述】：

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

代码：

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 的初学者。

【参考方案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