Stack 子小部件的动态小部件高度

Question

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

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 属性的文档；

如果指定了 [flexibleSpace] 小部件，则此高度应该很大 足以容纳该小部件包含的任何内容。

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