如何在 SliverAppBar

问题描述

现在我使用 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);
                  },)
            ],);

解决方法

不要使用灵活空间，而是使用操作：

 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,actions: [
        Padding(
          padding: EdgeInsets.only(right: 10),child: TextButton(
            onPressed: () {
              Route route = MaterialPageRoute(builder: (context) => Choices());
              Navigator.push(context,route);
            },child: Text(
              "Choices",[...]
    )