Home Articles

更改Appbar默认的arrow_back图标

Asked
Viewed 733 times
0

enter image description here

在Navigator.push上,新页面的appbar的前导图标是arrow_back,我想隐式地将图标更改为所有页面的arrow_forward .

方向性是RTL

可能吗?

1 Answer

  • 0

    UPDATE

    Flutter now handles directionality for icons.


    我已经阅读了源代码,BackButton现在没有考虑Directionality .

    所以我创建了自己的BackButton2和getAppBarLeading函数

    appBar: new AppBar(
            leading: getAppBarLeading(context),
    

    SRC:

    // Copyright 2017 The Chromium Authors. All rights reserved.
    // Use of this source code is governed by a BSD-style license that can be
    // found in the LICENSE file.
    
    import 'package:flutter/material.dart';
    
    const double _kLeadingWidth =
        kToolbarHeight; // So the leading button is square.
    
    /// A "back" icon that's appropriate for the current [TargetPlatform].
    ///
    /// The current platform is determined by querying for the ambient [Theme].
    ///
    /// See also:
    ///
    ///  * [BackButton], an [IconButton] with a [BackButtonIcon] that calls
    ///    [Navigator.maybePop] to return to the previous route.
    ///  * [IconButton], which is a more general widget for creating buttons
    ///    with icons.
    ///  * [Icon], a material design icon.
    ///  * [ThemeData.platform], which specifies the current platform.
    class BackButtonIcon2 extends StatelessWidget {
      /// Creates an icon that shows the appropriate "back" image for
      /// the current platform (as obtained from the [Theme]).
      const BackButtonIcon2({Key key}) : super(key: key);
    
      /// Returns the appropriate "back" icon for the given `platform`.
      static IconData _getIconData(
          TargetPlatform platform, TextDirection direction) {
        switch (platform) {
          case TargetPlatform.android:
          case TargetPlatform.fuchsia:
            return (direction == TextDirection.rtl)
                ? Icons.arrow_forward
                : Icons.arrow_back;
          case TargetPlatform.iOS:
            return (direction == TextDirection.rtl)
                ? Icons.arrow_forward_ios
                : Icons.arrow_back_ios;
        }
        assert(false);
        return null;
      }
    
      @override
      Widget build(BuildContext context) => new Icon(_getIconData(
            Theme.of(context).platform,
            Directionality.of(context),
          ));
    }
    
    /// A material design back button.
    ///
    /// A [BackButton] is an [IconButton] with a "back" icon appropriate for the
    /// current [TargetPlatform]. When pressed, the back button calls
    /// [Navigator.maybePop] to return to the previous route.
    ///
    /// When deciding to display a [BackButton], consider using
    /// `ModalRoute.of(context)?.canPop` to check whether the current route can be
    /// popped. If that value is false (e.g., because the current route is the
    /// initial route), the [BackButton] will not have any effect when pressed,
    /// which could frustrate the user.
    ///
    /// Requires one of its ancestors to be a [Material] widget.
    ///
    /// See also:
    ///
    ///  * [AppBar], which automatically uses a [BackButton] in its
    ///    [AppBar.leading] slot when the [Scaffold] has no [Drawer] and the
    ///    current [Route] is not the [Navigator]'s first route.
    ///  * [BackButtonIcon], which is useful if you need to create a back button
    ///    that responds differently to being pressed.
    ///  * [IconButton], which is a more general widget for creating buttons with
    ///    icons.
    ///  * [CloseButton], an alternative which may be more appropriate for leaf
    ///    node pages in the navigation tree.
    class BackButton2 extends StatelessWidget {
      /// Creates an [IconButton] with the appropriate "back" icon for the current
      /// target platform.
      const BackButton2({Key key, this.color}) : super(key: key);
    
      /// The color to use for the icon.
      ///
      /// Defaults to the [IconThemeData.color] specified in the ambient [IconTheme],
      /// which usually matches the ambient [Theme]'s [ThemeData.iconTheme].
      final Color color;
    
      @override
      Widget build(BuildContext context) {
        return new IconButton(
            icon: const BackButtonIcon2(),
            color: color,
            tooltip: MaterialLocalizations.of(context).backButtonTooltip,
            onPressed: () {
              Navigator.of(context).maybePop();
            });
      }
    }
    
    /// A material design close button.
    ///
    /// A [CloseButton] is an [IconButton] with a "close" icon. When pressed, the
    /// close button calls [Navigator.maybePop] to return to the previous route.
    ///
    /// Use a [CloseButton] instead of a [BackButton] on fullscreen dialogs or
    /// pages that may solicit additional actions to close.
    ///
    /// See also:
    ///
    ///  * [AppBar], which automatically uses a [CloseButton] in its
    ///    [AppBar.leading] slot when appropriate.
    ///  * [BackButton], which is more appropriate for middle nodes in the
    ///    navigation tree or where pages can be popped instantaneously with
    ///    no user data consequence.
    ///  * [IconButton], to create other material design icon buttons.
    class CloseButton2 extends StatelessWidget {
      /// Creates a Material Design close button.
      const CloseButton2({Key key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return new IconButton(
          icon: const Icon(Icons.close),
          tooltip: MaterialLocalizations.of(context).closeButtonTooltip,
          onPressed: () {
            Navigator.of(context).maybePop();
          },
        );
      }
    }
    
    Widget getAppBarLeading(BuildContext context) {
      final ModalRoute<dynamic> parentRoute = ModalRoute.of(context);
      final bool canPop = parentRoute?.canPop ?? false;
      final bool useCloseButton =
          parentRoute is MaterialPageRoute<dynamic> && parentRoute.fullscreenDialog;
      Widget leading = canPop
          ? (useCloseButton ? const CloseButton2() : const BackButton2())
          : null;
      if (leading != null) {
        leading = new ConstrainedBox(
          constraints: const BoxConstraints.tightFor(width: _kLeadingWidth),
          child: leading,
        );
      }
      return leading;
    }
    

Related