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 在定位小部件内，您将必须精确定位的顶部和底部，在我的情况下，我没有按底部，所以我无法滚动下