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

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

1 个答案: