时间戳

首页 > 解决方案 > 如何向页面视图 Flutter 添加不同的项目

flutter - 如何向页面视图 Flutter 添加不同的项目

问题描述

我有这段代码，它允许我在包含文本的卡片之间滚动。但是，它所做的只是在每张卡片上添加相同的文字。我想显示两个单独的文本，它们保存在里面

HomeInfo()
Achieve()

这是我目前拥有的代码：


SizedBox(
                    height: 300,
                      child: PageView.builder(
                        itemCount: 2,
                        controller: PageController(viewportFraction: 0.7),
                        onPageChanged: (int index) =>
                            setState(() => _index = index),
                        itemBuilder: (_, i) {
                          return Transform.scale(
                            scale: i == _index ? 1 : 0.9,
                            child: Card(
                              elevation: 6,
                              shape: RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(20)),
                              child: Center(
                                child: HomeInfo(),
                              ),
                            ),
                          );
                        },
                      ),
                    ),

我真的很困惑如何做到这一点。（我刚开始接触编码）谢谢

标签： flutterflutter-pageview

解决方案

您需要检查索引并返回适当的小部件。

您可以通过以下方式实现：

SizedBox(
                    height: 300,
                      child: PageView.builder(
                        itemCount: 2,
                        controller: PageController(viewportFraction: 0.7),
                        onPageChanged: (int index) =>
                            setState(() => _index = index),
                        itemBuilder: (_, i) {

                          return Transform.scale(
                            scale: i == _index ? 1 : 0.9,
                            child: Card(
                              elevation: 6,
                              shape: RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(20)),
                              child: Center(
                                child: i == 0 ? HomeInfo() : Achieve(), // this line
                              ),
                            ),
                          );
                        },
                      ),
                    ),

推荐阅读