flutter - 如何在 Flutter Web 中使整个页面可滚动？

Question

以下代码的问题是唯一可滚动的部分是页面末尾的 _offerlist。我希望整个页面都可以滚动。我用 ListView 将列包裹在正文部分，但出现错误：

errors.dart:187 Uncaught Error: Unexpected null value.at Object.throw_ [as throw] (errors.dart:236) at Object.nullCheck (operations.dart:518) at viewport.RenderViewport.new.hitTestChildren (viewport.dart :703) 在 vi​​ewport.RenderViewport.new.hitTest (box.dart:2414) 在 proxy_box.RenderIgnorePointer.new.hitTestChildren

  @override
  Widget build(BuildContext context) {
    var product = firestore.collection("Products").doc(widget.post["id"]);
    return StreamBuilder(
        stream: product.snapshots(),
        builder: (context, snapshot) {
          if (!snapshot.hasData) {
            return Container(child: const CircularProgressIndicator());
          } else {
            return Scaffold(
              appBar: AppBar(
                elevation: 0,
              ),
              body: Column(
                children: [
                  Expanded(
                    child: Row(
                      children: [
                        Container(
                          width: MediaQuery.of(context).size.width * 0.4,
                          child: Column(
                            children: [
                              Row(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceBetween,
                                children: <Widget>[
                                  Expanded(
                                    child: Padding(
                                      padding:
                                          const EdgeInsets.only(left: 30.0),
                                      child: Text(
                                        snapshot.data["name"],
                                        style: TextStyle(
                                            color: Colors.blue.shade900,
                                            fontWeight: FontWeight.bold,
                                            fontSize: 20.0),
                                      ),
                                    ),
                                  )
                                ],
                              ),
                              FutureBuilder(
                                  future: getImages,
                                  builder: (context,
                                      AsyncSnapshot<List<dynamic>> snapshot) {
                                    if (!snapshot.hasData) {
                                      return const CircularProgressIndicator();
                                    } else {
                                      return Column(
                                        children: [photos(snapshot)],
                                      );
                                    }
                                  }),
                            ],
                          ),
                        ),
                        textPart(snapshot),
                      ],
                    ),
                  ),
                  _offerList(product)
                ],
              ),
            );
          }
        });
  }

  textPart(AsyncSnapshot<dynamic> snapshot) {
    return Container(
      width: MediaQuery.of(context).size.width * 0.6,
      child: Column(
        children: [
          Expanded(
            child: ListView(
              children: [
                Padding(
                  padding: const EdgeInsets.only(top: 40.0, left: 20.0),
                  child: Row(
                    children: <Widget>[
                      Text(
                        "${snapshot.data["oldPrice"].toString()}",
                      ),
                    ],
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(top: 20.0, left: 20.0),
                  child: Row(
                    children: <Widget>[
                      (Text(" ${snapshot.data["winnerUsername"]}"))
                    ],
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(top: 20.0, left: 20.0),
                  child: Row(
                    children: <Widget>[
                      Text(
                        "${snapshot.data["price"]}",
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  FutureBuilder<List<dynamic>> _offerList(
      DocumentReference<Map<String, dynamic>> product) {
    return FutureBuilder(
        future: _getOfferList(product),
        builder: (context, AsyncSnapshot<List<dynamic>> snapshot) {
          if (!snapshot.hasData) {
            return Container();
          } else {
            return Container(
              height: 250,
              child: Column(
                children: [
                  Expanded(
                    child: ListView(
                      children: [
                        Padding(
                          padding: const EdgeInsets.only(
                              left: 5.0, top: 20.0, bottom: 20.0),
                          child: ListTile(
                            title: Text(
                              "Offers",
                              style: TextStyle(
                                fontWeight: FontWeight.w700,
                                fontSize: 16,
                                color: Colors.blue.shade900,
                              ),
                            ),
                          ),
                        ),
                        ListView.builder(
                            padding: const EdgeInsets.only(bottom: 20.0),
                            scrollDirection: Axis.vertical,
                            shrinkWrap: true,
                            itemCount: snapshot.data.length,
                            itemBuilder: (context, index) {
                              return Container(
                                child: Card(
                                  elevation: 10.0,
                                  child: Hero(
                                    tag: index.toString(),
                                    child: Material(
                                      child: InkWell(
                                        child: Padding(
                                          padding: const EdgeInsets.all(8.0),
                                          child: ListTile(
                                            title: Text(
                                              snapshot.data[index]["username"],
                                            ),
                                            subtitle: Text(snapshot.data[index]
                                                    ["offer"]
                                                .toString()),
                                          ),
                                        ),
                                      ),
                                    ),
                                  ),
                                ),
                              );
                            }),
                      ],
                    ),
                  ),
                ],
              ),
            );
          }
        });
  }

  Column photos(AsyncSnapshot<List<dynamic>> snapshot) {
    return Column(
      children: [
        Padding(
          padding: const EdgeInsets.only(left: 30.0, top: 15),
          child: Align(
            alignment: Alignment.topLeft,
            child: SizedBox(
              width: 238,
              child: AspectRatio(
                aspectRatio: 1,
                child: Hero(
                  tag: snapshot.data[selectedImage]["i"].toString(),
                  child: Image(
                      image: NetworkImage((snapshot.data[selectedImage]["i"]))),
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }

标签： flutter

Answer 1

用SingleChildScrollView小部件包装您的列小部件。

这可能会解决我猜的问题

SingleChildScrollView(
      Column(
          ...
      )
)