AppBar 可在不同页面重复使用，并在不同页面效果上路由

问题描述

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

1. Appbar 与页面的宽度不同。 Appbar shorter then page width
2. 文本和图标似乎没有垂直居中。看起来应用栏有边框！ （如果我移动对齐，我可以播种边界。见图 2。 see white icon on the right
3. 当我切换页面时，似乎一个 Appbar 在可重用的 Appbar 下。见图3。 Appbar under reusable 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
      //   ),// ),);
  }

解决方法

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

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

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