同一屏幕上有多个浮动操作按钮显示黑屏 [英] More than one floating action button on same screen displays black screen

问题描述

我尝试在其中一个屏幕上添加两个浮动操作按钮，结果是在第一次重新加载应用程序后出现黑屏。

I tried to add two floating action buttons on one of my screens and the result was a black screen after the first reload of the app.

Column(
       mainAxisSize: MainAxisSize.min,
       children: <Widget>[
            FloatingActionButton(
                onPressed: () {
                },
                materialTapTargetSize: MaterialTapTargetSize.padded,
                backgroundColor: Colors.green,
                child: const Icon(Icons.map, size: 36.0),
           ),
           SizedBox(
                height: 16.0,
           ),
           FloatingActionButton(
                onPressed: () {},
                materialTapTargetSize: MaterialTapTargetSize.padded,
                backgroundColor: Colors.green,
                child: const Icon(Icons.add_location, size: 36.0),
           ),
    ],
),

从错误日志我注意到下面的行

From the debug log I noted the below line

 Within each subtree for which heroes are to be animated (typically a PageRoute subtree),
 each Hero must have a unique non-null tag.In this case, multiple heroes
 had the following tag: <default FloatingActionButton tag>

推荐答案

调试信息表明问题出在英雄动画上

The debug information suggests that the issue is with hero animation of the floating action button.

如果不想在FAB上使用英雄动画，请将两个FAB的heroTag属性设置为null。

If you don't want hero animations on FAB, make the heroTag property of both the FAB as null.

Column(
   mainAxisSize: MainAxisSize.min,
   children: <Widget>[
        FloatingActionButton(
            heroTag: null,
            onPressed: () {
            },
            materialTapTargetSize: MaterialTapTargetSize.padded,
            backgroundColor: Colors.green,
            child: const Icon(Icons.map, size: 36.0),
       ),
       SizedBox(
            height: 16.0,
       ),
       FloatingActionButton(
            heroTag: null,
            onPressed: () {},
            materialTapTargetSize: MaterialTapTargetSize.padded,
            backgroundColor: Colors.green,
            child: const Icon(Icons.add_location, size: 36.0),
       ),
    ],
),

如果您喜欢使用FAB的默认英雄动画，则向FAB添加唯一的英雄标签。

If you prefer default hero animations with the FAB, add unique hero tags to the FABs.

Column(
       mainAxisSize: MainAxisSize.min,
       children: <Widget>[
            FloatingActionButton(
                heroTag: 'unq1',
                onPressed: () {
                },
                materialTapTargetSize: MaterialTapTargetSize.padded,
                backgroundColor: Colors.green,
                child: const Icon(Icons.map, size: 36.0),
           ),
           SizedBox(
                height: 16.0,
           ),
           FloatingActionButton(
                heroTag: 'unq2'
                onPressed: () {},
                materialTapTargetSize: MaterialTapTargetSize.padded,
                backgroundColor: Colors.green,
                child: const Icon(Icons.add_location, size: 36.0),
           ),
        ],
),

这篇关于同一屏幕上有多个浮动操作按钮显示黑屏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！