Question

我正在尝试在应用程序栏的开头添加图标按钮，但是该图标没有出现在应用程序栏中。

下面是我可重复使用的AppBarWidget代码：

class CustomAppBar extends StatelessWidget with PreferredSizeWidget {

  final String appBarTitle;
  final bool backButton;
  final VoidCallback buttonAction;
  CustomAppBar({this.appBarTitle, this.backButton, this.buttonAction});

  @override
  Widget build(BuildContext context) {
    if (backButton) {
      return AppBar(
        backgroundColor: Colors.white,
        centerTitle: true,
        title: Text(
            appBarTitle,
            style: TextStyle(
              color: Colors.black,
              fontSize: 20.0,
              fontFamily: 'SF Pro Display',
              fontWeight: FontWeight.w700,
            )
        ),
        leading: IconButton(
          icon: Icon(Icons.arrow_back_ios),
          onPressed: buttonAction,
        ),
      );
    } else {
      return AppBar(
        backgroundColor: Colors.white,
        centerTitle: true,
        title: Text(
            appBarTitle,
            style: TextStyle(
              color: Colors.black,
              fontSize: 20.0,
              fontFamily: 'SF Pro Display',
              fontWeight: FontWeight.w700,
            )
        ),
      );
    }
  }

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

下面是我的ProfilePic.dart，它调用了应用栏：

class ProfilePicPage extends StatefulWidget {
  @override
  _ProfilePicState createState() =>
      _ProfilePicState();
}

class _ProfilePicState
    extends State< ProfilePicPage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: ConstantColor.BackgroundGrey,
        appBar: AppBarSimple(
          appBarTitle: 'profile_picture',
          backButton: true,
          buttonAction: () {
            Navigator.pop(context);
          },
        ),

当我在真实的iPhone设备上运行它时，出现以下错误：

Error Message in terminal

但是当我尝试将图标添加到正文中时，它确实出现在了正文中。

The icon shows in body

我还在pubspec.yaml中添加了“ uses-material-design：true”。

flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

Answer 1

我不是什么错误，但是我可以给您其他方法，而不是使用IconButton，而是使用Icon并将其包装在Gesture Detector中。

leading: GestureDetector(
          child: Icon(Icons.arrow_back_ios),
          onPressed: buttonAction,
        ),

尝试做这些

Answer 2

尝试这个

leading: Icon(Icons.arrow_back_ios),

Answer 3

您可以尝试将Cupertino图标添加到pubspec.yaml。 https://api.flutter.dev/flutter/cupertino/CupertinoIcons-class.html

name: my_awesome_application

dependencies:
  cupertino_icons: ^0.1.0

Answer 4

您看不到leadingIcon，因为默认情况下它是白色的，与您在AppBar中的backgroundColor: Colors.white相同。尝试在leadingIcon中添加颜色。您看不到它，但是它在那里。

Answer 5

我想，它可能缺少图标的大小或颜色。您是否正在尝试设置图标的大小和颜色？

EX：

Icon(
      Icons.arrow_back_ios,
      color: Colors.green,
      size: 30.0,
)

颤振图标未显示在应用程序栏中，但可以在正文中使用

5 个答案: