flutter - AppBar 可在不同页面重用和路由在不同页面效果

Question

我无法用可重复使用的 appbar 解决两个问题。

1. Appbar 的页面宽度不一样。 应用栏比页面宽度短
2. 文本和图标似乎没有垂直居中。看起来 appbar 有一个边框！（如果我移动对齐，我可以播种边界。见图 2。 见右侧的白色图标
3. 当我翻页时，似乎有一个 Appbar 在可重复使用的 Appbar 下。见图3. 可复用Appbar下的Appbar

在每个页面中，我都使用此代码来调用 Appbar：

Widget build(BuildContext context) {
    return Scaffold(
      //backgroundColor: Colors.white,
       appBar: AppBar(
         title: ReusableBar(),
      ),

这是可重用 AppBar 的代码：

class ReusableBar extends StatelessWidget implements PreferredSizeWidget{
  @override
  Widget build(BuildContext context) {
    //number = number + displayedText;
    return AppBar(
      //elevation: 0.0,
      centerTitle: true,
      automaticallyImplyLeading: false,
      titleSpacing: 0.0,
      title: Text(getTranslated(context, 'total_click:') + "$_appbarcounter"),
      actions: <Widget>[
        IconButton(
          alignment: Alignment(0.0, -4.0),
          icon: Icon(
            Icons.save,
            color: Colors.white,
          ),
          onPressed: () {
            // do something
            //TODO AGGIUNGERE FUNZIONE AL PULSANTE SAVE CON PAGINA DI SALVATAGGIO
          },
        )
      ],
      // leading: GestureDetector(
      //   onTap: () { /* Write listener code here */ },
      //   child: Icon(
      //     Icons.menu,  // add custom icons also
      //   ),
      // ),
    );
  }

Answer 1

如果你把你ReusableBar的title属性放在它的属性中，AppBar那就是将一个 appbar 包装在另一个 appbar 中。就像您在评论中提到的那样，您应该像这样实现您的自定义应用栏：

@override
Widget build(BuildContext context) {
   return Scaffold(
      appBar: ReusableBar(),
   );
}

这样做你只声明一个应用栏，这应该可以解决你的问题。