代码之家 › 专栏 › 技术社区 › Jamie White

堆栈子小部件的动态小部件高度

flutter dart

Jamie White · 技术社区 · 6 年前

堆栈有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(),

1 回复 | 直到 6 年前

Ozan Yurtsever 6 年前

好吧,我要回答 “向上扩展” 问题。在 Positioned 保存 “容器3文本” ,您已经设置了这样的参数;

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

这里的问题是,当你设置 bottom 属性为 “0” ,那么它将是这个小部件在底部的固定位置,当这个小部件展开时,它不会改变固定底部的位置,这就是为什么它要向上展开的原因。所以,用 top 属性来定位此小部件 垂直地 . 一旦你设定 顶部 属性,则该小部件的顶部位置将固定,您将看到它向下扩展。例如;

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

添加: 您必须考虑到,即使您的小部件在这之后会向下扩展,它也不会跨越其父小部件的边界。父控件 SliverAppBar 有 expandedHeight 属性,并且设置为 "195.0" . 超出此高度范围的任何内容都不会显示。从文档中 膨胀高度 财产;

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

自从你 Text 小部件是灵活的,您必须为 膨胀高度 财产。