如何在 SliverAppBar 上制作一个动作按钮（不是真的，它只是一个文本框）

Posted 2023-02-23

【中文标题】如何在 SliverAppBar 上制作一个动作按钮（不是真的，它只是一个文本框）

【英文标题】：How to make an action botton(not really, it just a box of text)on SliverAppBar

【发布时间】：2021-09-27 02:25:15

【问题描述】：

现在我使用 SliverAppBar，如果我想将文本“选择”（在图片中）移动到右侧，然后单击（单击文本）它会转到另一个页面。我该怎么办！！ 我做的那个离边界太近了，太低了不在同一水平。

class Poll extends StatelessWidget 
    const Poll( Key? key ) : super(key: key);

    @override
    Widget build(BuildContext context) 
         return CustomScrollView(
            slivers: [
                SliverAppBar(
                  pinned: true,
                  backgroundColor: Colors.black,
                  flexibleSpace: Row(
                      mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                      GestureDetector(
                        child: Container(
                          alignment: Alignment.bottomRight,
                          child: Text(
                             "Choices",
                             style: TextStyle(color: Colors.white,fontSize:20)
                          ),
                        ),
                  onTap: ()
                    Route route = MaterialPageRoute(builder: (context)=>Choices());
                    Navigator.push(context, route);
                  ,
                )
            ],
         );

【问题讨论】：

你试过用GestureDetector 换行吗？并分享代码 1st

【参考方案1】：

不使用flexibleSpace使用actions：

 SliverAppBar(
      pinned: true,
      backgroundColor: Colors.black,
      actions: [
        TextButton(
          onPressed: () 
            Route route = MaterialPageRoute(builder: (context) => Choices());
            Navigator.push(context, route);
          ,
          child: Text(
            "Choices",
            style: TextStyle(color: Colors.white, fontSize: 20),
          ),
        )
      ],
     [...]
    )

如果右侧需要更多空间，请使用 Padding 包裹 textButton ：

SliverAppBar(
      pinned: true,
      backgroundColor: Colors.black,
      actions: [
        Padding(
          padding: EdgeInsets.only(right: 10),
          child: TextButton(
            onPressed: () 
              Route route = MaterialPageRoute(builder: (context) => Choices());
              Navigator.push(context, route);
            ,
            child: Text(
              "Choices",
              style: TextStyle(color: Colors.white, fontSize: 20),
            ),
          ),
        )
      ],
      [...]
    )