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

将ListView.builder替换为Column小部件，并删除所有AlignedPositioned，而应使用Positioned（如果可能）。删除父堆栈容器，并添加一个具有高度值的容器。它会帮助堆栈计算其大小。您必须从商品列表中获取最终尺寸。这就是我可以让您的代码按需运行的方式。

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

Flutter SingleChildScrollView在堆栈内部不起作用

2 个答案: