标题在灵活空格栏上未正确显示

Question

我正在尝试显示标题，但正如您所看到的，它没有正确显示。

我试图将 softWrap 设置为 true 但它仍然相同。

代码来自fluttercontacts_demo 库

flexibleSpace: FlexibleSpaceBar(
          title: const Text('Fantastic Beasts And Where To Find Them'),
            background: Stack(
               fit: StackFit.expand,
              children: <Widget>[
                Image.asset(
                  'people/ali_landscape.png',
                  package: 'flutter_gallery_assets',
                  fit: BoxFit.cover,
                  height: _appBarHeight,
                ),
                // This gradient ensures that the toolbar icons are distinct
                // against the background image.
                const DecoratedBox(
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                      begin: Alignment(0.0, -1.0),
                      end: Alignment(0.0, -0.4),
                      colors: <Color>[Color(0x60000000), Color(0x00000000)],
                    ),
                  ),
                ),
              ],
            ),
          ),

Answer 1

我深入研究了FlexibleSpaceBar资料来源，至少现在我明白发生了什么。事实证明，在展开状态下title会放大到1.5其大小，因此自然会溢出到屏幕外。当用户向上滚动时，title会缩小到其源大小1.0。在这个尺寸下，它将位于顶部工具栏中。

也许这些信息将帮助某人确定解决方法，直到问题得到解决。

我想知道为什么我用ConstraintedBoxwith包装标题的技巧maxWidth: MediaQuery.of(context).size.width不起作用。现在我知道：我必须将其 maxWidth除以1.5。

另请参阅Flutter github 问题跟踪器上的此错误。

Answer 2

您可以使用一个ConstrainedBox沿MediaQuery.of(context).size.width

final mediaQuery = MediaQuery.of(context);

final availableWidth = mediaQuery.size.width - 160;

随着

title: ConstrainedBox(
    constraints: BoxConstraints(
        maxWidth: availableWidth,
    ),
    child: const Text('Fantastic Beasts And Where To Find Them'),
),