Flutter开发中遇到的问题(1)
2015 年 1 月 23 日
问题1：
项目地址在: github
在使用 FloatingActionButton
这个Widget的时候，在使用的时候把 FloatingActionButton
控件放置到 home所在的page中(也就是iOS中的ViewController 安卓中的Activity)。这个时候的设置是这个样子的：
//渲染多个浮动按钮
Widget renderFloatingActionButton() {
// 一组按钮ButtonBar
return ButtonBar(
// 按钮的在水平方向上的对齐方式。
// spaceAround 分散对齐
alignment: MainAxisAlignment.spaceAround,
// 当前组中的组员
children: [
// 第一个浮动按钮
FloatingActionButton(
//点击事件
onPressed: () {
choosePic(ImageSource.camera);
},
//这只是一个标识长按文字提示
tooltip: 'photo_camera',
// 按钮的设置
child: Icon(Icons.photo_camera),
),
// 第二个浮动按钮
FloatingActionButton(
onPressed: () {
choosePic(ImageSource.gallery);
},
tooltip: 'photo_library',
child: Icon(Icons.photo_library),
)
],
);
}
看起来没有什么问题运行起来也没有用什么问题。
但是。。当我把自己练习的demo放在一起的时候，这个页面的上一层是一个item，点击item跳转到当前page。。问题终于出现了。。。。
问题描述：点击item跳转到另外一个页面，另外一个页面底部有两个悬浮的button，点击之后页面黑屏，去掉一个按钮之后，页面正常显示。黑屏的时候控制台报错如下：
报错讯息可能有点长，可以忽略一大部分，这里给出一些能提示你找问题的地方(如果要看详细的报错信息请在页面最后查看)：
The following assertion was thrown during a scheduler callback: There are multiple heroes that share the same tag within a subtree. Within each subtree for which heroes are to be animated (i.e. a PageRoute subtree), each Hero must have a unique non-null tag. In this case, multiple heroes had the following tag:
大意是：一个子树只能拥有一个tag值。不同子树的tag值不能相同，而你现在的路径中有不止一个子树，这些子树都用了一个默认的tag值。这样就报错了。
知道问题描述了，下面开始追踪到底是哪里出了问题：
Hero(tag: , state: _HeroState#7f098)
...
└Tooltip("photo_library", position: below, dependencies: [TickerMode], state:_TooltipState#232f8
OK，这里定位到了 FloatingActionButton
中的 Tooltip("photo_library"）
也就是我们所写的控件一。
既然说这里用的是默认tag，那么我们更改下tag值问题应该就不存在了吧。接着，我们来看 FloatingActionButton
给我们提供了哪些属性：
FloatingActionButton.extended({
Key key,
this.tooltip,
this.foregroundColor,
this.backgroundColor,
this.focusColor,
this.hoverColor,
this.heroTag = const _DefaultHeroTag(),
this.elevation,
this.focusElevation,
this.hoverElevation,
this.highlightElevation,
this.disabledElevation,
@required this.onPressed,
this.shape,
this.isExtended = true,
this.materialTapTargetSize,
this.clipBehavior = Clip.none,
this.focusNode,
Widget icon,
@required Widget label,
})
我们看到一个属性 heroTag
而他返回了一个默认值;
我们来看一下这个 heroTag
以及它的默认值:
/// If this is not explicitly set, then there can only be one /// [FloatingActionButton] per route (that is, per screen), since otherwise /// there would be a tag conflict (multiple heroes on one route can't have the /// same tag). The material design specification recommends only using one /// floating action button per screen.
默认值：
class _DefaultHeroTag {
const _DefaultHeroTag();
@override
String toString() => '';
}
根据 heroTag
的定义我们可以知道，在一个页面中，只能存在一个相同的tag值，多个heroes不能使用相同的tag值。而我们的 floating action button
就是一个 hero
，并且一个页面出现了两次，如果不设置 heroTag
就会产生冲突。我们对这个两个 FloatingActionButton
添加 heroTag
之后，冲突就解决了。(这个herotag主要是方便做动画效果，具体可参考hero动画)
错误描述全部：
flutter: ══╡ EXCEPTION CAUGHT BY SCHEDULER LIBRARY ╞═════════════════════════════════════════════════════════
flutter: The following assertion was thrown during a scheduler callback:
flutter: There are multiple heroes that share the same tag within a subtree.
flutter: Within each subtree for which heroes are to be animated (i.e. a PageRoute subtree), each Hero must
flutter: have a unique non-null tag.
flutter: In this case, multiple heroes had the following tag:
flutter: Here is the subtree for one of the offending heroes:
flutter: # Hero(tag: , state: _HeroState#7f098)
flutter: # └SizedBox(renderObject: RenderConstrainedBox#0b125 relayoutBoundary=up8 NEEDS-PAINT)
flutter: # └Offstage(offstage: false, renderObject: RenderOffstage#81335 relayoutBoundary=up9 NEEDS-PAINT)
flutter: # └TickerMode(mode: enabled)
flutter: # └KeyedSubtree-[GlobalKey#9c6ce]
flutter: # └Tooltip("photo_library", position: below, dependencies: [TickerMode], state:
flutter: _TooltipState#232f8(ticker inactive))
flutter: # └GestureDetector(startBehavior: start)
flutter: # └RawGestureDetector(state: RawGestureDetectorState#58fc4(gestures: [long press], behavior:
flutter: opaque))
flutter: # └Listener(listeners: [down], behavior: opaque, renderObject: RenderPointerListener#24b9a
flutter: relayoutBoundary=up10 NEEDS-PAINT)
flutter: # └Semantics(container: false, properties: SemanticsProperties, label: "photo_library",
flutter: value: null, hint: null, hintOverrides: null, dependencies: [Directionality], renderObject:
flutter: RenderSemanticsAnnotations#c6cc8 relayoutBoundary=up11 NEEDS-PAINT)
flutter: # └RawMaterialButton(state: _RawMaterialButtonState#681f5)
flutter: # └Semantics(container: true, properties: SemanticsProperties, label: null, value: null,
flutter: hint: null, hintOverrides: null, renderObject: RenderSemanticsAnnotations#86632
flutter: relayoutBoundary=up12 NEEDS-PAINT)
flutter: # └_InputPadding(renderObject: _RenderInputPadding#90535 relayoutBoundary=up13
flutter: NEEDS-PAINT)
flutter: # └Focus(dependencies: [_FocusMarker], state: _FocusState#ee3c4)
flutter: # └_FocusMarker
flutter: # └ConstrainedBox(BoxConstraints(w=56.0, h=56.0), renderObject:
flutter: RenderConstrainedBox#c2ddc relayoutBoundary=up14 NEEDS-PAINT)
flutter: # └Material(type: button, elevation: 6.0, color: Color(0xff2196f3),
flutter: textStyle.debugLabel: (((englishLike button 2014).merge(whiteCupertino button)).copyWith).copyWith,
flutter: textStyle.inherit: false, textStyle.color: Color(0xffffffff), textStyle.family: .SF UI Text,
flutter: textStyle.size: 14.0, textStyle.weight: 500, textStyle.letterSpacing: 1.2, textStyle.baseline:
flutter: alphabetic, textStyle.decoration: TextDecoration.none, shape:
flutter: CircleBorder(BorderSide(Color(0xff000000), 0.0, BorderStyle.none)), dependencies: [TickerMode],
flutter: state: _MaterialState#9380e)
flutter: # └_MaterialInterior(duration: 200ms, shape:
flutter: CircleBorder(BorderSide(Color(0xff000000), 0.0, BorderStyle.none)), elevation: 6.0, color:
flutter: Color(0xff2196f3), shadowColor: Color(0xff000000), dependencies: [TickerMode, Directionality],
flutter: state: _MaterialInteriorState#374a9(ticker inactive))
flutter: # └PhysicalShape(clipper: ShapeBorderClipper, elevation: 6.0, color:
flutter: Color(0xff2196f3), shadowColor: Color(0xff000000), renderObject: RenderPhysicalShape#81092
flutter: NEEDS-PAINT)
flutter: # └_ShapeBorderPaint(dependencies: [Directionality])
flutter: # └CustomPaint(renderObject: RenderCustomPaint#79891 NEEDS-PAINT)
flutter: # └NotificationListener
flutter: # └_InkFeatures-[GlobalKey#4fbd0 ink renderer](renderObject:
flutter: _RenderInkFeatures#a166b NEEDS-PAINT)
flutter: # └AnimatedDefaultTextStyle(duration: 200ms, debugLabel: (((englishLike button
flutter: 2014).merge(whiteCupertino button)).copyWith).copyWith, inherit: false, color: Color(0xffffffff),
flutter: family: .SF UI Text, size: 14.0, weight: 500, letterSpacing: 1.2, baseline: alphabetic, decoration:
flutter: TextDecoration.none, softWrap: wrapping at box width, overflow: clip, dependencies: [TickerMode],
flutter: state: _AnimatedDefaultTextStyleState#0aef0(ticker inactive))
flutter: # └DefaultTextStyle(debugLabel: (((englishLike button
flutter: 2014).merge(whiteCupertino button)).copyWith).copyWith, inherit: false, color: Color(0xffffffff),
flutter: family: .SF UI Text, size: 14.0, weight: 500, letterSpacing: 1.2, baseline: alphabetic, decoration:
flutter: TextDecoration.none, softWrap: wrapping at box width, overflow: clip)
flutter: # └InkWell(gestures: [tap], clipped to BoxShape.rectangle, dependencies:
flutter: [_FocusMarker], state: _InkResponseState#527c4)
flutter: # └Listener(listeners: [enter, exit], behavior: translucent, renderObject:
flutter: RenderPointerListener#e73bd NEEDS-PAINT)
flutter: # └GestureDetector(startBehavior: start)
flutter: # └RawGestureDetector(state: RawGestureDetectorState#14fe4(gestures:
flutter: [tap], behavior: opaque))
flutter: # └_GestureSemantics(renderObject: RenderSemanticsGestureHandler#18230
flutter: NEEDS-PAINT)
flutter: # └Listener(listeners: [down], behavior: opaque, renderObject:
flutter: RenderPointerListener#0c4e6 NEEDS-PAINT)
flutter: # └Builder(dependencies: [IconTheme])
flutter: # └IconTheme(IconThemeData#15fa8(color: Color(0xffffffff)))
flutter: # └Container(padding: EdgeInsets.zero)
flutter: # └Padding(padding: EdgeInsets.zero, dependencies:
flutter: [Directionality], renderObject: RenderPadding#48145 NEEDS-PAINT)
flutter: # └Center(alignment: center, widthFactor: 1.0, heightFactor: 1.0,
flutter: dependencies: [Directionality], renderObject: RenderPositionedBox#bd5b3 NEEDS-PAINT)
flutter: # └Builder(dependencies: [IconTheme])
flutter: # └IconTheme(IconThemeData#15fa8(color: Color(0xffffffff)))
flutter: # └Icon(IconData(U+0E413), dependencies: [Directionality,
flutter: IconTheme])
flutter: # └Semantics(container: false, properties:
flutter: SemanticsProperties, label: null, value: null, hint: null, hintOverrides: null, renderObject:
flutter: RenderSemanticsAnnotations#9a63c relayoutBoundary=up1 NEEDS-PAINT)
flutter: # └ExcludeSemantics(excluding: true, renderObject:
flutter: RenderExcludeSemantics#b80fe relayoutBoundary=up2 NEEDS-PAINT)
flutter: # └SizedBox(width: 24.0, height: 24.0, renderObject:
flutter: RenderConstrainedBox#b6771 relayoutBoundary=up3 NEEDS-PAINT)
flutter: # └Center(alignment: center, dependencies:
flutter: [Directionality], renderObject: RenderPositionedBox#d5b8f NEEDS-PAINT)
flutter: # └RichText(textDirection: ltr, softWrap: wrapping at box
flutter: width, overflow: visible, maxLines: unlimited, text: "", dependencies:
flutter: [_LocalizationsScope-[GlobalKey#955e1]], renderObject: RenderParagraph#df683 relayoutBoundary=up1
flutter: NEEDS-PAINT)
flutter:
flutter:
flutter: When the exception was thrown, this was the stack:
flutter: #0 Hero._allHeroesFor.addHero. (package:flutter/src/widgets/heroes.dart:265:11)
flutter: #1 Hero._allHeroesFor.addHero (package:flutter/src/widgets/heroes.dart:275:8)
flutter: #2 Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:288:20)
flutter: #3 SingleChildRenderObjectElement.visitChildren (package:flutter/src/widgets/framework.dart:5080:14)
flutter: #4 Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)
flutter: #5 ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:3955:14)
flutter: #6 Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)
flutter: #7 SingleChildRenderObjectElement.visitChildren (package:flutter/src/widgets/framework.dart:5080:14)
flutter: #8 Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)
flutter: #9 MultiChildRenderObjectElement.visitChildren (package:flutter/src/widgets/framework.dart:5181:16)
flutter: #10 Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)
flutter: #11 SingleChildRenderObjectElement.visitChildren (package:flutter/src/widgets/framework.dart:5080:14)
flutter: #12 Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)
flutter: #13 ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:3955:14)
flutter: #14 Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)
flutter: #15 SingleChildRenderObjectElement.visitChildren (package:flutter/src/widgets/framework.dart:5080:14)
flutter: #16 Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)
flutter: #17 ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:3955:14)
flutter: #18 Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)
flutter: #19 SingleChildRenderObjectElement.visitChildren (package:flutter/src/widgets/framework.dart:5080:14)
flutter: #20 Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)
flutter: #21 ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:3955:14)
flutter: #22 Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)
flutter: #23 MultiChildRenderObjectElement.visitChildren (package:flutter/src/widgets/framework.dart:5181:16)
flutter: #24 Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)
flutter: #25 ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:3955:14)
flutter: #26 Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)
flutter: #27 ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:3955:14)
flutter: #28 Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)
flutter: #29 ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:3955:14)
flutter: #30 Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)
flutter: #31 MultiChildRenderObjectElement.visitChildren (package:flutter/src/widgets/framework.dart:5181:16)
flutter: #32 Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)
flutter: #33 ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:3955:14)
flutter: #34 Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)
flutter: #35 ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:3955:14)
flutter: #36 Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)
flutter: #37 ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:3955:14)
flutter: #38 Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)
flutter: #39 SingleChildRenderObjectElement.visitChildren (package:flutter/src/widgets/framework.dart:5080:14)
flutter: #40 Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)
flutter: #41 ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:3955:14)
flutter: #42 Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)
flutter: #43 SingleChildRenderObjectElement.visitChildren (package:flutter/src/widgets/framework.dart:5080:14)
flutter: #44 Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)
flutter: #45 ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:3955:14)
flutter: #46 Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)
flutter: #47 ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:3955:14)
flutter: #48 Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)
flutter: #49 ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:3955:14)
flutter: #50 Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)
flutter: #51 ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:3955:14)
flutter: #52 Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)
flutter: #53 ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:3955:14)
flutter: #54 Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)
flutter: #55 ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:3955:14)
flutter: #56 Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)
flutter: #57 SingleChildRenderObjectElement.visitChildren (package:flutter/src/widgets/framework.dart:5080:14)
flutter: #58 Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)
flutter: #59 ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:3955:14)
flutter: #60 Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)
flutter: #61 SingleChildRenderObjectElement.visitChildren (package:flutter/src/widgets/framework.dart:5080:14)
flutter: #62 Element.visitChildElements (package:flutter/src/widgets/framework.dart:2820:5)
flutter: #63 Hero._allHeroesFor (package:flutter/src/widgets/heroes.dart:305:13)
flutter: #64 HeroController._startHeroTransition (package:flutter/src/widgets/heroes.dart:783:51)
flutter: #65 HeroController._maybeStartHeroTransition. (package:flutter/src/widgets/heroes.dart:757:11)
flutter: #66 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1016:15)
flutter: #67 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:966:9)
flutter: #68 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:874:5)
flutter: #72 _invoke (dart:ui/hooks.dart:236:10)
flutter: #73 _drawFrame (dart:ui/hooks.dart:194:3)
flutter: (elided 3 frames from package dart:async)
flutter: ════════════════════════════════════════════════════════════════════════════════════════════════════
QQ技术交流群：214541576
热爱生活，分享快乐。好记性不如烂笔头。多写，多记，多实践，多思考。
About The Author
