同一屏幕上多个浮动操作按钮显示黑屏

Question

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

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),
           ),
    ],
),

从调试日志中，我注意到以下行

 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>

Answer 1

调试信息表明问题在于浮动操作按钮的英雄动画。

如果您不想在 FAB 上显示英雄动画，请将两个 FAB 的 heroTag 属性设为 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 添加独特的英雄标签。

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),
           ),
        ],
),