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

好吧，我将为“向上扩展” 问题给出答案。在装有“容器3文本” 的<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"> </script> <script type="text/javascript" src="/static/js/sijax/sijax.js"></script> <script type="text/javascript" src="/static/js/sijax/sijax_upload.js"></script> <script type="text/javascript"> {{ g.sijax.get_js()|safe }} {{ form_init_js|safe }} </script> </head> <body> <div style="float: left; width: 450px"> <form id="formOne" name="formOne" style="width: 400px" method="post" enctype="multipart/form-data"> <input type="submit" value="Upload" name="one"/> </form> <div id="formOneResponse"></div> </div> </form> </body> </html>小部件上，您已设置了以下参数；

Positioned

这里的问题是，当您将Positioned( bottom: 0, left: 0, right: 0, //codes continue.. )属性设置为“ 0” 时，该小部件在底部以及当该小部件处于固定位置时在扩展时，它不会更改固定的底部位置，这就是为什么它将向上扩展的原因。因此，请使用bottom属性代替此控件垂直。设置top属性后，此小部件的顶部位置将固定，并且您将看到它正在向下扩展。例如；

top

添加：您必须考虑到，即使在此之后您的小部件都将向下扩展的情况下，它也永远不会越过其父小部件的边界。父窗口小部件Positioned( top: 130, left: 0, right: 0, //codes continue.. )具有SliverAppBar属性，您设置为expandedHeight。任何超出此高度范围的内容，将不会显示。来自有关"195.0"属性的文档；

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

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

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

1 个答案: