Flutter SingleChildScrollView 在 Stack 中不起作用

Question

所以我正在嘗試制作一個帶有滾動堆棧的屏幕，並且我正在使用 AlignPositioned 包來對齊堆棧中的定位小部件我嘗試使用擴展小部件 LayoutBuilders 我只是不知道如何使它成為動態的（ https ://pub.dev/packages/align_positioned )

下面有很多城市名稱，根據容器的高度，屏幕只能滾動到其中的 1-2 個。 這是我當前的代碼，每當我為 Container 設置恆定高度時，UI 不會引發錯誤，但屏幕不能完全滾動

return SafeArea(
  child: Scaffold(
      body: SingleChildScrollView(
        child: Container(
          height: MediaQuery.of(context).size.height,
          child: Stack(
            children: <Widget>[
              Positioned(
                top: 0,
                child: TopArc(), // The blue background circle
              ),
              AlignPositioned(
                dy: 40,
                alignment: Alignment.topCenter,
                child: Padding(
                  padding: const EdgeInsets.symmetric(
                      horizontal: 16, vertical: 4),
                  child: AutoSizeText(
                    "Choose Your Location",
                    stepGranularity: 1,
                    maxLines: 1,
                    style: TextStyle(
                      fontSize: 38,
                      color: Colors.white,
                      // This is the maximum value then the AutoSizeText widget will shrink it until it can fit a single line.
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ),
              AlignPositioned(
                dy: 90,
                alignment: Alignment.topCenter,
                child: StreamBuilder<QuerySnapshot>(
                  stream: Firestore.instance
                      .collection('locations')
                      .snapshots(),
                  builder: (context, snapshot) {
                    if (snapshot.hasError) {
                      return CircularProgressIndicator();
                    }
                    if (!snapshot.hasData) {
                      return CircularProgressIndicator();
                    }
                    return ContentTile(
                      child: ListView.builder(
                        physics: NeverScrollableScrollPhysics(),
                        shrinkWrap: true,
                        itemCount: snapshot.data.documents.length,
                        itemBuilder: (ctx, int i) {
                          final document = snapshot.data.documents[i];

                          return LocationExpansionTile(
                              document.documentID, document["cityName"]);
                        },
                      ),
                    );
                  },
                ),
              ),
            ],
          ),
        ),
      )),
);

Answer 1

用Column小部件替換ListView.builder並刪除所有 AlignedPositioned 而不是使用 Positioned （如果可能的話）。 移除 Stack 的父 Container 並添加一個具有高度值的 Container。 它將幫助堆棧計算其大小。 您必須從項目列表中獲取最終尺寸。 這就是我可以讓你的代碼按照你的意願運行的方式。

var _itemsView = GlobalKey();

double _stackHeight;

@override
void initState() {
  WidgetsBinding.instance.addPostFrameCallback((_) {
    RenderBox stackRB =
        _itemsView.currentContext.findRenderObject() as RenderBox;
    setState(() {
      _stackHeight = stackRB.size.height;
    });
  });
  super.initState();
}

@override
Widget build(BuildContext context) {
  return SafeArea(
    child: Scaffold(
        body: SingleChildScrollView(
      child: Stack(
        children: <Widget>[
          Positioned(
            ...
          ),
          Positioned(
            ...
          ),
          Positioned(
            key: _itemsView,
            top: 90,
            child: Column(
              children: _data.map((i) {
                  final document = snapshot.data.documents[i];
                  return LocationExpansionTile(
                      item.documentID, item["cityName"]);
                }),
            ),
          ),
          Container(
            height: _stackHeight + 90,
          )
        ],
      ),
    )),
  );
}

Answer 2

我正在處理幾乎相同的問題，如果您的 SingleChildScrollView 在定位小部件內，您將必須精確定位的頂部和底部，在我的情況下，我沒有按底部，所以我無法滾動下