NestedScrollView / SliverAppBar-标题未正确对齐

时间:2019-02-12 07:43:40

标签: android dart flutter android-collapsingtoolbarlayout

首先,这是我想要获得的最终结果。

崩溃:

enter image description here

展开:

enter image description here

以上2个屏幕截图来自本机Java Android应用程序。我需要使用Flutter获得相同的效果。

我的Flutter代码来构建应用栏:

return new Scaffold(
        body: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
              SliverAppBar(
                expandedHeight: 130.0,
                floating: false,
                pinned: true,
                flexibleSpace: FlexibleSpaceBar(
                  title:  new Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      mainAxisSize: MainAxisSize.min,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        new Text(
                          widget.drawerItems[_selectedDrawerIndex].title,
                        ),

                        new Text(
                          globals.cityName,
                          style: new TextStyle(
                              color: Color.fromARGB(255, 240, 240, 240),
                              fontWeight: FontWeight.w300
                          ),
                        )
                      ]

                  ),
                ),
              ),
            ];
          },
          body: _getDrawerItemWidget(_selectedDrawerIndex),
        ),
        drawer: new Drawer(
          child: new Column(
            children: <Widget>[
              new UserAccountsDrawerHeader(
                  accountName: new Text("Gość"), accountEmail: null),
              new Column(children: drawerOptions)
            ],
          ),
        ));

但是,效果不是我所需要的,请看:

enter image description here

enter image description here

问题:

  • 折叠模式:标题/副标题错误
  • 扩展模式:标题/字幕应与左侧屏幕对齐 边缘,在汉堡菜单按钮下
  • 颜色:整个应用栏空间在扩展模式下应具有状态栏颜色

您是否知道如何在Flutter中获得所需的结果?

0 个答案:

没有答案