AppBar 可在不同页面重用和路由在不同页面效果答案

【问题标题】：AppBar reusable in different pages and route on different page effectAppBar 可在不同页面重用和路由在不同页面效果
【发布时间】：2021-01-04 19:55:52
【问题描述】：

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

Appbar 的页面宽度不同。 Appbar shorter then page width
文本和图标似乎没有垂直居中。看起来 appbar 有一个边框！（如果我移动对齐，我可以播种边界。见图 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
      //   ),
      // ),
    );
  }

【问题讨论】：

解决部分修改页面代码的问题。 return Scaffold( //backgroundColor: Colors.white, appBar: ReusableBar(),

标签： flutter dart flutter-appbar

【解决方案1】：

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

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

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

【讨论】：