Question

我正在我的应用程序中使用this expandable bottom app bar，如您所见，它运行正常，但显示出底部溢出。

我不明白：这种溢出是正常现象，因为它是此插件的目标-隐藏小部件并在向上滚动时显示它-。

我在使用中错过了一些东西吗？

这是我的代码：

 Positioned(
            bottom: 0.0,
            left: 0.0,
            right: 0.0,
            child: BottomExpandableAppBar(
              // Provide the bar controller in build method or default controller as ancestor in a tree 
              controller: controller,
              appBarHeight: 00.0,
              expandedHeight: controller.dragLength,
              horizontalMargin: 0.0,
              bottomOffset: 50.0,
              //expandedBackColor: Colors.white,
              expandedDecoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(20),
                          topRight: Radius.circular(20),
                        ),
                        boxShadow: [
                          BoxShadow(
                              color: Colors.black12,
                              offset: Offset(5.0, 5.0),
                              blurRadius: 15.0,
                              spreadRadius: 15.0,
                            ),
                        ]
                      ),
              // Your bottom sheet code here
              expandedBody: GestureDetector(
                onVerticalDragUpdate: controller.onDrag,
                onVerticalDragEnd: controller.onDragEnd,
                child: Column(
                  children: <Widget>[
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Padding(
                          padding: const EdgeInsets.only(top: 8.0),
                          child: Icon(
                            Feather.getIconData('minus'),
                            size: 30.0,
                            ),
                        )
                      ],
                    ),
                    Container(),// my content
                  ],
                ),
              ),
              shape: AutomaticNotchedShape(
                       RoundedRectangleBorder(),
                       StadiumBorder(
                           side: BorderSide()
                           )
                        ),
              // Your bottom app bar code here
            ),

Answer 1

此软件包旨在用作底部的应用栏。您必须按照以下步骤进行操作：

bottomNavigationBar: BottomExpandableAppBar(
        // Provide the bar controller in build method or default controller as ancestor in a tree 
        controller: bbc,
        expandedHeight: expandedHeight.value,
        horizontalMargin: 16,
        expandedBackColor: Theme.of(context).backgroundColor,
        // Your bottom sheet code here
        expandedBody: Center(
          child: Text("Hello world!"),
        ),
        // Your bottom app bar code here
        bottomAppBarBody: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              Expanded(
                child: Text(
                  "Hello",
                  textAlign: TextAlign.center,
                ),
              ),
              Spacer(
                flex: 2,
              ),
              Expanded(
                child: Text(
                  "World",
                  textAlign: TextAlign.center,
                ),
              ),
            ],
          ),
        ),
      )

Answer 2

我解决了将expandedBody小部件包装在高度为（expandedHeight + kToolbarHeight）的SizedBox中，然后将其包装在SingleChildScrollView中的问题，从而实现了物理：NeverScrollableScrollPhysics（）

ps：kToolbarHeight是应用栏高度的常量。

我希望这可以帮助其他人解决这个烦人的问题。

编辑：与kToolbarHeight相比，使用kBottomNavigationBarHeight更好，因为它更适合于上下文，但是两者具有相同的值。

可扩展底栏溢出

2 个答案: