【问题标题】:Title not displaying correctly on flexibleSpaceBar标题在flexibleSpaceBar上没有正确显示
【发布时间】:2019-04-14 13:38:33
【问题描述】:

我正在尝试显示标题,但如您所见,它没有正确显示。

我尝试将 softWrap 设置为 true,但还是一样。

代码来自flutter contacts_demo gallery

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

【问题讨论】:

  • 你希望它是什么样子?
  • 位置还可以,我只想显示整个标题

标签: flutter flutter-layout flutter-sliver


【解决方案1】:

由于显而易见的原因,标题长度和您设置的字体大小无法在较小的设备上显示在单行上。

您可能想要使用MediaQuery.of(context).size.width 来获取设备宽度并相应地设置标题文本 fontSize 作为其中的一部分。在模拟器中试一试,看看哪个最适合您的文本长度。

const Text(
    'Fantastic Beasts And Where To Find Them', 
    style: TextStyle(fontSize: MediaQuery.of(context).size.width/ SOME_NUMBER),
),

或者只是根据一些宽度间隔硬编码一些字体大小:

int _getFontSize(BuildContext context) {
    int width = MediaQuery.of(context).size.width;
    if (width < 300) {
        return 10;
    } else if (width < 600) {
        return 13;
    // etc ...
    } else {
        return 18;
    }

}

...

const Text(
    'Fantastic Beasts And Where To Find Them', 
    style: _getFontSize(context),
),

【讨论】:

    【解决方案2】:

    您可以将ConstrainedBoxMediaQuery.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'),
    ),
    

    【讨论】:

    • @Guillaume 老实说,我刚刚测试了几个值,160 在我的屏幕上看起来不错。
    • @Guillaume 我在我的发现下面发布了为什么上面需要160。它仅适用于 320dp 宽屏幕,您应该除以 1.5 以使其在任何地方都能正常工作。直到有一天有一个适当的修复。
    【解决方案3】:

    我挖掘了FlexibleSpaceBar 的来源,至少现在我明白会发生什么。事实证明,在展开状态下,title 被放大到其大小的1.5,所以它自然会溢出屏幕。当用户向上滚动时,title 会缩小到其源大小1.0。在这个大小下,它将位于顶部工具栏中。

    也许此信息将帮助某人在此问题得到解决之前确定他们的解决方法。

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

    另请参阅 Flutter github 问题跟踪器上的 this bug

    【讨论】:

      【解决方案4】:

      感谢 dimsuz 的回答,可以消除 FlexibleSpaceBar 中文本的放大:

      SliverAppBar(
              actions: <Widget>[
                IconButton(
                  icon: Icon(Icons.save),
                  onPressed: () {},
                ),
              ],
              floating: true,
              pinned: false,
              snap: false,
              flexibleSpace: FlexibleSpaceBar(
                title: Text(title, style: TextStyle(fontSize: 20.0 / 1.5)),
                centerTitle: false,
                background: Container(
                  color: Theme.of(context).primaryColor,
                ),
              ),
              expandedHeight: 120,
            ),
      

      fontSize 中的20.0 来自here

      【讨论】:

        猜你喜欢
        • 2016-05-01
        • 2018-06-27
        • 2021-05-20
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2021-07-19
        • 2010-12-09
        • 1970-01-01
        相关资源
        最近更新 更多