Question

我已经厌倦了布局的尝试。我只是找不到如何将菜单图标对准sliverAppBar底部的方式。调整sliverAppBar的大小时，它应永久固定在底部。

SliverAppBar(
  expandedHeight: 200.0,
  floating: false,
  pinned: true,
  elevation: 0.0,
  /*leading: Column( // <-- icon positioned in the upper section of appBar
    mainAxisAlignment: MainAxisAlignment.end,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Icon(Icons.menu, size: 40,)
    ],
  ),*/
  flexibleSpace: SafeArea(child:
    FlexibleSpaceBar(
      background: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Image.asset(
            'assets/images/store.png',
            fit: BoxFit.cover,
            width: 120,
            height: 120,
          )
        ],
      ),
      title: Row( // <-- hides icon when appBar is spreaded out
        children: <Widget>[
          Icon(Icons.menu, size: 40, color: Colors.white,)
        ],
      ),
    )
  )
),

这些方法都不符合我的预期。

我只想将此图标永久对齐到appBar的左下角。我不想在appBar显示时隐藏图标，也不想将其留在appBar的上部。如何解决？

Answer 1

在SliverAppBar中使用 action 参数，之后，您可以使用 action 参数设计所需的方式例如

SliverAppBar(
          expandedHeight: 180.0,
          backgroundColor: mytheme.Colors.primaryColor,
          actions: <Widget>[

               ],
        ),

Answer 2

将菜单图标放在title处。默认情况下，SliverAppBar标题的填充为EdgeInsetsDirectional.only(start: 72, bottom: 16)，因此将其更改为EdgeInsetsDirectional.only(start: 16, bottom: 16)则其外观如下

  SliverAppBar(
              expandedHeight: 200.0,
              floating: false,
              pinned: true,
              elevation: 0.0,
              flexibleSpace: SafeArea(
                  child: FlexibleSpaceBar(
                background: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [FlutterLogo(size: 100.0,)],
                ),
               titlePadding: EdgeInsetsDirectional.only(start: 16, bottom: 16),
               title: Icon(
                      Icons.menu,
                      size: 40,
                      color: Colors.white,
                  )
          ))),

颤振：sliberAppBar粘图标到底部

2 个答案: