dart - Stack 子部件的动态部件高度

Question

Stack 有 3 个子属性，第一个子属性(红色背景)部分可见，因为最后一个子属性(黑色背景)在顶部。我需要最后一个 child 直接在其他两个 child 的下方，它不应该像现在这样重叠。最后一个子项包含动态文本 - 多行文本导致文本 block 向上移动而不是向下移动 - 尝试向最后一个子项添加几行。

return new Scaffold(
            body: NestedScrollView(
              controller:_scrollController ,
              headerSliverBuilder:
                  (BuildContext contrxt, bool innerBoxIsScrolled) {
                    print('scrolled $innerBoxIsScrolled');
                return <Widget>[
                  SliverAppBar(
                    backgroundColor: Colors.transparent,
                    automaticallyImplyLeading: false,
                    expandedHeight: 195.0,
                    pinned: true,
                    floating: true,
                    forceElevated: innerBoxIsScrolled,
                    flexibleSpace: FlexibleSpaceBar(
                      background: new Stack(children: <Widget>[
                         Positioned(
                           right: 0.0,
                           left: 0,
                           bottom: -1,
                           child: Container(
                             color: Colors.redAccent,
                             height: 50.0,
                             child: Text("Container 1 Text", textAlign: TextAlign.center,),
                           ),
                         ),
                         Container(
                            color: Colors.blue,
                           height: MediaQuery.of(context).size.height / 6,
                            width: MediaQuery.of(context).size.width,
                          child: Text("Container 2 Text", textAlign: TextAlign.center,),
                          ),
                        Positioned(
                          bottom: 0,
                          left: 0,
                          right: 0,
                          child: Container(
                            //margin: EdgeInsets.only(top: 49.0),
                            color: Colors.black,
                            //height: 20.0,
                            width: MediaQuery.of(context).size.width,
                            //padding: EdgeInsets.only(top: 5.0, left: 20.0, bottom: 5.0, right: 20.0),
                            child: Padding(
                              padding: const EdgeInsets.all(10.0),
                              child: new Text("Container 3",
                                style: TextStyle(fontSize: 12.0, color: Colors.grey[800]),
                              ),
                            ),
                          ),
                        )
                      ]),
                    ),
                  ),
                ];
              },
              body: Container(),

Answer 1

好吧，我要给出“向上扩展”问题的答案。在包含"Container 3 Text" 的Positioned 小部件中，您已经设置了这样的参数；

Positioned(
     bottom: 0,
     left: 0,
     right: 0,
     //codes continue.. )

这里的问题是，当您将 bottom 属性设置为 "0" 时，它将成为该小部件底部的固定位置，并且当这个小部件展开时，它不会改变固定的底部位置，这就是为什么它会向上展开。因此，不是这样，而是使用 top 属性来垂直 放置此小部件。一旦你设置了 top 属性，那么这个小部件的顶部位置将被固定，你会看到它正在向下扩展。例如；

Positioned(
     top: 130,
     left: 0,
     right: 0,
     //codes continue.. )

补充:您必须考虑到，即使在此之后您的小部件将向下扩展，它也永远不会越过其父小部件的边界。父控件 SliverAppBar 具有 expandedHeight 属性，您将其设置为 "195.0"。任何超出此高度范围的东西都不会显示。来自关于 expandedHeight 属性的文档；

If a [flexibleSpace] widget is specified this height should be big enough to accommodate whatever that widget contains.

由于您的 Text 小部件是灵活的，您必须为 expandedHeight 属性设置足够的空间。