如何更改appBar后退按钮的颜色

116

我无法弄清楚如何将appBar的自动后退按钮更改为其他颜色。它在一个脚手架下，我曾尝试对其进行研究，但我无法将其包裹住。

return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        title: Image.asset(
          'images/.jpg',
          fit: BoxFit.fill,
        ),
        centerTitle: true,
      ),
flutter 
— 弗里曼
source

Answers:

312

您必须使用iconThemeAppBar的属性，如下所示：

appBar: AppBar(
  iconTheme: IconThemeData(
    color: Colors.black, //change your color here
  ),
  title: Text("Sample"),
  centerTitle: true,
),

或者，如果您想自己处理后退按钮。

appBar: AppBar(
  leading: IconButton(
    icon: Icon(Icons.arrow_back, color: Colors.black),
    onPressed: () => Navigator.of(context).pop(),
  ), 
  title: Text("Sample"),
  centerTitle: true,
),

更好的是，仅当您想要更改后退按钮的颜色时。 

appBar: AppBar(
  leading: BackButton(
     color: Colors.black
   ), 
  title: Text("Sample"),
  centerTitle: true,
),
— 地狱战士
source
4
我们是否有机会一次替换App AppBar中的Icon，而不是使用AppBar放入所有屏幕？
— djalmafreestyler
1
@djalmafreestyler创建一个类似的自定义小部件ParentPage，您可以在其中添加一次appBar，并且在所有位置都可以使用它代替Scaffold
— Sisir
37

您还可以通过'leading'用您选择的小部件覆盖默认的后退箭头：

leading: new IconButton(
  icon: new Icon(Icons.arrow_back, color: Colors.orange),
  onPressed: () => Navigator.of(context).pop(),
),

如果未设置，则AppBar小部件所做的全部工作就是提供默认的“前导”小部件。

— 布兰妮
source
1
并非完全正确，因为AppBar当按a时还将显示后退按钮ModalRoute。
— creativecreatorormaybenot
3
并automaticallyImplyLeading: false在AppBar中设置。
— Loolooii
1
为Navigator.of(context).pop();感谢伙计而
— 投票
1
如果我已经删除了所有导航器历史记录，该怎么办！此代码将崩溃！
— Shady Mohamed Sherif
然后检查是否可以弹出，例如：if（Navigator.canPop（context））{Navigator.pop（context）; } else {//做某事}}
— blaneyneil
13

仅仅创建一个新按钮并为其添加颜色似乎更容易，这就是我为任何想知道的人做的方法

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: BackButton(
            color: Colors.black
        ),
— 弗里曼
source
1
做工精美。最简洁的解决方案。
— 哈希尔·拜格
5

您还可以为应用程序全局设置前导图标颜色

MaterialApp(
  theme: ThemeData(
    appBarTheme: AppBarTheme(
      iconTheme: IconThemeData(
        color: Colors.green
      )
    )
  )
)
— 卡什洛
source
需要注意的重要一点是它是AppBarTheme的iconTheme，因为ThemeData本身也具有iconTheme。
— 斯科特，
3 
AppBar(        
    automaticallyImplyLeading: false,
    leading: Navigator.canPop(context)
        ? IconButton(
            icon: Icon(
              Icons.arrow_back,
              color: Colors.black,
              size: 47,
            ),
            onPressed: () => Navigator.of(context).pop(),
          )
        : null,
);
— 乔治·帕帕达基斯（George Papadakis）
source
1

您可以自定义AppBarWidget，关键词有很重要，也可以自定义分配AppBarWidget到appBar财产脚手架：

import 'package:flutter/material.dart';

double _getAppBarTitleWidth(
    double screenWidth, double leadingWidth, double tailWidth) {
  return (screenWidth - leadingWidth - tailWidth);
}

class AppBarWidget extends StatelessWidget with PreferredSizeWidget {
  AppBarWidget(
      {Key key,
      @required this.leadingChildren,
      @required this.tailChildren,
      @required this.title,
      this.leadingWidth: 110,
      this.tailWidth: 30})
      : super(key: key);

  final List<Widget> leadingChildren;
  final List<Widget> tailChildren;
  final String title;
  final double leadingWidth;
  final double tailWidth;

  @override
  Widget build(BuildContext context) {
    // Get screen size
    double _screenWidth = MediaQuery.of(context).size.width;

    // Get title size
    double _titleWidth =
        _getAppBarTitleWidth(_screenWidth, leadingWidth, tailWidth);

    double _offsetToRight = leadingWidth - tailWidth;

    return AppBar(
      title: Row(
        children: [
          Container(
            width: leadingWidth,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: leadingChildren,
            ),
          ),
          Container(
            color: Colors.green,
            width: _titleWidth,
            padding: const EdgeInsets.only(left: 5.0, right: 5),
            child: Container(
              padding: EdgeInsets.only(right: _offsetToRight),
              color: Colors.deepPurpleAccent,
              child: Center(
                child: Text('$title'),
              ),
            ),
          ),
          Container(
            color: Colors.amber,
            width: tailWidth,
            child: Row(
              children: tailChildren,
            ),
          )
        ],
      ),
      titleSpacing: 0.0,
    );
  }

  @override
  Size get preferredSize => Size.fromHeight(kToolbarHeight);
}

以下是有关如何使用它的示例：

import 'package:flutter/material.dart';
import 'package:seal_note/ui/Detail/DetailWidget.dart';
import 'package:seal_note/ui/ItemListWidget.dart';

import 'Common/AppBarWidget.dart';
import 'Detail/DetailPage.dart';

class MasterDetailPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _MasterDetailPageState();
}

class _MasterDetailPageState extends State<MasterDetailPage> {
  @override
  Widget build(BuildContext context) { 
    return Scaffold(
      appBar: AppBarWidget(leadingChildren: [
        IconButton(
          icon: Icon(
            Icons.arrow_back_ios,
            color: Colors.white,
          ),
        ),
        Text(
          '文件夹',
          style: TextStyle(fontSize: 14.0),
        ),
      ], tailChildren: [
        Icon(Icons.book),
        Icon(Icons.hd),
      ], title: '英语知识',leadingWidth: 140,tailWidth: 50,),
      body: Text('I am body'),
    );
  }
}
— 吉姆·甘
source
0 
  appBar: AppBar(
          iconTheme: IconThemeData(
            color: Colors.white, //modify arrow color from here..
          ),
      );
— Zeeshan Ansari
source
1
在答案中添加一些上下文，不建议仅使用代码的答案。
— 阿伦·维诺斯
0

更改CupertinoPageScaffold的主色

Theme(
  data: Theme.of(context).copyWith(
    cupertinoOverrideTheme: CupertinoThemeData(
      scaffoldBackgroundColor: Colors.white70,
      primaryColor: Styles.green21D877, // HERE COLOR OF LEADING
    ),
  ),
  child: CupertinoPageScaffold(
    navigationBar: CupertinoNavigationBar(
      brightness: Brightness.light,
      backgroundColor: Colors.white,
      middle: Text('Cupertino App Bar'),
    ),
    child: Container(
      child: Center(
        child: CupertinoActivityIndicator(),
      ),
    ),
  ),
)
— 雅思
source
0

要自定义前导图标，您可能需要模仿AppBar小部件的功能，该小部件可根据当前上下文正确处理显示后退按钮，抽屉图标或关闭图标的功能。这是一个替换默认图标的示例。

import 'package:flutter/material.dart';

class TopBar extends StatelessWidget with PreferredSizeWidget {
  static const double _topBarHeight = 60;

  @override
  Widget build(BuildContext context) {
    return AppBar(
      toolbarHeight: _topBarHeight,
      title: Text('Title'),
      automaticallyImplyLeading: false,
      leading: _buildLeadingWidget(context),
    );
  }

  @override
  Size get preferredSize => Size.fromHeight(_topBarHeight);

  Widget _buildLeadingWidget(BuildContext context) {
    final ScaffoldState scaffold = Scaffold.of(context);
    final ModalRoute<dynamic> parentRoute = ModalRoute.of(context);

    final bool canPop = ModalRoute.of(context)?.canPop ?? false;
    final bool hasDrawer = scaffold?.hasDrawer ?? false;
    final bool useCloseButton = parentRoute is PageRoute<dynamic> && parentRoute.fullscreenDialog;

    Widget leading;
    if (hasDrawer) {
      leading = IconButton(
        icon: const Icon(Icons.menu_rounded),
        onPressed: Scaffold.of(context).openDrawer,
        tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,
      );
    } else {
      if (canPop) {
        if (useCloseButton) {
          leading = IconButton(
              color: Theme.of(context).colorScheme.onBackground,
              icon: Icon(Icons.close_rounded),
              onPressed: () => Navigator.of(context).maybePop());
        } else {
          leading = IconButton(
              padding: EdgeInsets.all(0),
              iconSize: 38,
              icon: Icon(Icons.chevron_left_rounded),
              onPressed: Navigator.of(context).pop);
        }
      }
    }

    return leading;
  }
}

此类将PreferredSizeWidget用作混合项，因此您可以将其用作替换现有的AppBar窗口小部件Scaffold。请注意该_buildLeadingWidget方法，该方法仅在必要时显示后退按钮，如果有抽屉，则显示菜单按钮，如果显示全屏对话框，则显示关闭按钮。

— 汤姆·鲍尔斯
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.