颤振/飞镖中的页面浏览量无法滚动答案

【问题标题】：Pageview in flutter/dart is not getting scrollable颤振/飞镖中的页面浏览量无法滚动
【发布时间】：2021-09-27 11:04:00
【问题描述】：

我想制作水平可滚动的图像小部件。我为此设置了综合浏览量，但它既不工作也没有任何错误。不知道该怎么办。

Map<String, dynamic> documentData = snapshot.data.data();

                //List of images
                List imageList = documentData["images"];

                return ListView(
                  padding: EdgeInsets.all(0),
                  children: [
                    Container(
                        height: 400,
                        child: PageView(
                          children: [
                            for (var i = 0; i < imageList.length; i++)
                                Container(
                                    child: Image.network(
                                  "${imageList[i]}",
                                  fit: BoxFit.cover,
                                ))
                          ],
                        )),

【问题讨论】：

小部件树为我工作，顺便说一句await 在接收数据时，也许其他部分给你带来了麻烦。
请分享整个代码
我建议您为您的 Container 添加一个宽度，而不是在您的 ListView 中添加 shrinkWrap: true ，然后打印出 List 并检查一切是否正确（不为空且不为空）。然后尝试使用生成小部件列表而不是 for 循环的方法。

标签： flutter dart uipageviewcontroller

【解决方案1】：

这些在 for 循环中创建的新容器并未添加到子列表中。请改用展开运算符或 PageView.builder。示例：

    PageView.builder(
              itemcount: imageList.length,
              itemBuilder:(BuildContext context, int index ){
              return Container(
                                 child: Image.network(
                                      "${imageList[index]}",
                                      fit: BoxFit.cover,
                                    ));
    
    },
),

或

PageView(
                          children: [
                            for (var i = 0; i < imageList.length; i++)
                                ...[Container(
                                    child: Image.network(
                                  "${imageList[i]}",
                                  fit: BoxFit.cover,
                                )),]
                          ],
                        )

【讨论】：

是的，它现在对我有用。谢谢您的帮助。赞赏。

【解决方案2】：

这是我的全部代码。你可以检查一下。我只想让页面视图可滚动，这不是现在。它没有显示任何错误。

// import 'dart:html';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:e_commerce_app/screens/constants.dart';
import 'package:e_commerce_app/screens/widgets/custom_action_bar.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

class ProductPage extends StatefulWidget {
  final String productId;
  ProductPage({this.productId});

  @override
  _ProductPageState createState() => _ProductPageState();
}

class _ProductPageState extends State<ProductPage> {
  final CollectionReference _productsRef =
      FirebaseFirestore.instance.collection("Products");

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Stack(
      children: [
        FutureBuilder(
            future: _productsRef.doc(widget.productId).get(),
            builder: (context, snapshot) {
              if (snapshot.hasError) {
                return Scaffold(
                  body: Center(
                    child: Text("Error: ${snapshot.error}"),
                  ),
                );
              }

              if (snapshot.connectionState == ConnectionState.done) {
                // Firebase DocumentData Map
                Map<String, dynamic> documentData = snapshot.data.data();

                //List of images
                List imageList = documentData["images"];

                return ListView(
                  padding: EdgeInsets.all(0),
                  children: [
                    Container(
                        height: 400,
                        child: PageView(
                          children: [
                            for (var i = 0; i < imageList.length; i++)
                              Container(
                                  child: Image.network(
                                "${imageList[i]}",
                                fit: BoxFit.cover,
                              ))
                          ],
                        )),
                    Padding(
                      padding: const EdgeInsets.only(
                          top: 24, left: 24, right: 24, bottom: 4),
                      child: Text(
                        "${documentData["name"]}",
                        style: Constants.boldheading,
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.symmetric(
                          vertical: 4, horizontal: 24),
                      child: Text(
                        "\$${documentData["price"]}",
                        style: TextStyle(
                            fontSize: 18,
                            color: Theme.of(context).accentColor,
                            fontWeight: FontWeight.w600),
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.symmetric(
                          vertical: 4, horizontal: 24),
                      child: Text(
                        "${documentData["desc"]}",
                        style: TextStyle(
                          fontSize: 16,
                        ),
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.symmetric(
                          vertical: 24, horizontal: 24),
                      child:
                          Text("Select Size", style: Constants.regularDarkText),
                    ),
                  ],
                );
              }

              return Scaffold(
                body: Center(
                  child: CircularProgressIndicator(),
                ),
              );
            }),
        CustomActionBar(
          hasBackArrow: true,
          hasTitle: false,
          hasbackground: false,
        )
      ],
    ));
  }
}

【讨论】：

我通过删除 api 属性和使用 dummy future 来测试代码。它在这里工作正常
和 scoll 从 Name 顶部开始工作，你想全屏应用吗？