页面浏览占用了所有可用空间

Question

我在 SingleChildScrollView 内的 PageView 上遇到问题。 PageView 正在扩展以填充所有可用的垂直空间。

这是代码：

Expanded(
  child: Container(
    child: SingleChildScrollView(
      child: Column(
        children: [
          // Other widgets
        
            child: PageView(
              children: [
                // Page content
              ],
            ),
          
        ],
      ),
    ),
  ),
);

我需要根据其内容保留 PageView 高度变量，因为内容大小会发生变化 当我按原样运行此代码时，我看到一个白屏。

这就是我尝试过的所有方法 -

• 我尝试过扩展、灵活，但它们也占用了所有空间
• 我尝试将 PageView 的物理更改为 NeverScrollable 但仍然是白屏
• 我尝试将页面视图的高度（使用 SizedBox）固定为 MaxFinite，但它使屏幕太大。我可以永远滚动。

当前的结果是一个空白屏幕，我想要的看起来像这样，但问题是它向下滚动到无穷大（这是我尝试的第三件事）。

这是我尝试的另一种方法，但是其中缺少幻灯片动画

if (selectedTab['description']!)
                          SizedBox(height: 20),
                        if (selectedTab['description']!)
                          GestureDetector(
                              onHorizontalDragEnd: (details) {
                                if (details.primaryVelocity! < 0) {
                                  setState(() {
                                    for (var item in selectedTab.keys) {
                                      selectedTab[item] =
                                          item.toLowerCase() ==
                                              "specifications";
                                    }
                                  });
                                }
                              },
                              child: Padding(
                                padding: const EdgeInsets.symmetric(
                                    horizontal: 15, vertical: 15),
                                child: Text(
                                  textAlign: TextAlign.start,
                                  loremIpsum + loremIpsum,
                                  style: TextStyle(
                                    color: Colors.black54,
                                    fontSize: 15,
                                    fontFamily: "Main",
                                    fontWeight: FontWeight.bold,
                                  ),
                                ),
                              )),
                        if (selectedTab['specifications']!)
                          GestureDetector(
                            onHorizontalDragEnd: (details) {
                              if (details.primaryVelocity! > 0) {
                                setState(() {
                                  for (var item in selectedTab.keys) {
                                    selectedTab[item] =
                                        item.toLowerCase() == "description";
                                  }
                                });
                              } else if (details.primaryVelocity! < 0) {
                                setState(() {
                                  for (var item in selectedTab.keys) {
                                    selectedTab[item] =
                                        item.toLowerCase() == "review";
                                  }
                                });
                              }
                            },
                            child: Padding(
                              padding: const EdgeInsets.symmetric(
                                  horizontal: 10, vertical: 0),
                              child: SizedBox(
                                child: ListView.builder(
                                  shrinkWrap: true,
                                  physics: NeverScrollableScrollPhysics(),
                                  itemBuilder: (context, index) {
                                    Map specifications =
                                        thisProduct['specifications'];
                                    List keys =
                                        specifications.keys.toList();
                                    List values =
                                        specifications.values.toList();
                                    return Column(
                                      children: [
                                        if (index == 0) Divider(),
                                        Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.center,
                                          children: [
                                            Container(
                                              color: AppColors.background,
                                              width:
                                                  MediaQuery.sizeOf(context)
                                                          .width *
                                                      0.4,
                                              child: Padding(
                                                padding: const EdgeInsets
                                                    .symmetric(
                                                    vertical: 15),
                                                child: Center(
                                                  child: Text(
                                                    textAlign:
                                                        TextAlign.start,
                                                    keys[index],
                                                    style: TextStyle(
                                                      color: Colors.black,
                                                      fontSize: 15,
                                                      fontFamily:
                                                          "BoldMain",
                                                    ),
                                                  ),
                                                ),
                                              ),
                                            ),
                                            Container(
                                              color: Colors.white,
                                              width: (MediaQuery.sizeOf(
                                                              context)
                                                          .width *
                                                      0.6) -
                                                  40,
                                              child: Padding(
                                                padding: const EdgeInsets
                                                    .symmetric(
                                                    vertical: 15),
                                                child: Center(
                                                  child: Text(
                                                    textAlign:
                                                        TextAlign.start,
                                                    values[index]
                                                        .toString(),
                                                    style: TextStyle(
                                                      color: Colors.black,
                                                      fontSize: 15,
                                                      fontFamily:
                                                          "BoldMain",
                                                    ),
                                                  ),
                                                ),
                                              ),
                                            ),
                                          ],
                                        ),
                                        Divider(),
                                      ],
                                    );
                                  },
                                  itemCount:
                                      thisProduct['specifications'].length,
                                ),
                              ),
                            ),
                          ),
                        if (selectedTab["review"]!)
                          GestureDetector(
                            onHorizontalDragEnd: (details) {
                              if (details.primaryVelocity! > 0) {
                                setState(() {
                                  for (var item in selectedTab.keys) {
                                    selectedTab[item] =
                                        item.toLowerCase() ==
                                            "specifications";
                                  }
                                });
                              }
                            },
                            child: Center(
                              child: Text("ReVIEW CONTENT"),
                            ),
                          )

任何帮助将不胜感激。 谢谢你

Answer 1

如果您的示例有效，但没有幻灯片动画，则尝试将所有页面包装在 Row 内，包装在水平 SingleChildScrollView 内。将其物理重写为NeverScrollableScrollPhysics，然后在onHorizontalDragEnd内添加scrollController.animateTo()，并根据当前页面*屏幕宽度计算Offset