AppBar 可在不同页面复用，路由不同页面效果

Question

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

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

Answer 1

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

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

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

AppBar 可在不同页面复用，路由不同页面效果

AppBar reusable in different pages and route on different page effect

flutter

dart

flutter-appbar