flutter/dart 中的页面视图无法滚动

Question

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

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,
                                ))
                          ],
                        )),

Answer 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,
                                )),]
                          ],
                        )
       

Answer 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,
        )
      ],
    ));
  }
}