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

如何解决flutter/dart 中的页面视图无法滚动

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

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

解决方法

这些在 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]}",)),]
                          ],)
       

,

这是我的全部代码。你可以检查。我只是想让网页浏览可滚动，但现在还不行。它不会显示任何错误。

// 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]}",))
                          ],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),child: Text(
                        "${documentData["desc"]}",style: TextStyle(
                          fontSize: 16,Padding(
                      padding: const EdgeInsets.symmetric(
                          vertical: 24,child:
                          Text("Select Size",style: Constants.regularDarkText),],);
              }

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