Flutter 标题未在flexibleSpaceBar上正确显示

我试图显示标题，但正如你所看到的，它没有做得正确

我试图让softWrap成为现实，但它仍然是一样的

代码来自

flexibleSpace:FlexibleSpaceBar(
标题：const Text（“神奇的野兽和在哪里找到它们”），
背景：堆栈(
fit:StackFit.expand，
儿童：[
影像资产(
“people/ali_scape.png”，
套餐：'flatter_gallery_assets'，
适合：BoxFit.cover，
高度：_appBarHeight，
),
//此渐变确保工具栏图标清晰可见
//在背景图像上。
常数装饰盒(
装饰：盒子装饰(
梯度：线性梯度(
开始：对齐（0.0，-1.0），
结束：对齐（0.0，-0.4），
颜色：[颜色（0x60000000），颜色（0x00000000）]，
),
),
),
],
),
),

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

您可能需要使用

MediaQuery.of（context.size.width

来获取设备宽度，并相应地将标题文本fontSize设置为该宽度的一小部分。在emulator中试试看哪一个最适合您的文本长度

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

int\u getFontSize（构建上下文）{
int width=MediaQuery.of（context）.size.width；
如果（宽度<300）{
返回10；
}否则，如果（宽度<600）{
返回13；
//等等。。。
}否则{
返回18；
}
}
...
常量文本(
“神奇的野兽，在哪里可以找到它们”，
样式：_getFontSize（上下文），
),

您可以使用

约束框

以及

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

---

我深入研究了

FlexibleSpaceBar

源代码，至少现在我明白了发生了什么。结果表明，在扩展状态下，

title

被放大为其大小的

1.5

，因此它自然会溢出屏幕外。当用户向上滚动时，

title

将缩小到其源大小

1.0

。按此大小，它将位于顶部工具栏中

也许这些信息可以帮助人们在解决问题之前找到解决办法

我想知道为什么我用

maxWidth:MediaQuery.of（context.size.width

在

ConstraintedBox

中包装标题的方法不起作用。现在我知道了：我必须用

maxWidth

除以

1.5

---

另请参见Flatter github问题跟踪器。

多亏了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,
      ),

SliverAppBar(
行动：[
图标按钮(
图标：图标（Icons.save），
按下：（）{}，
),
],
浮动：是的，
错,，
快照：错，
flexibleSpace:FlexibleSpaceBar(
标题：文本（标题，样式：TextStyle（fontSize:20.0/1.5）），
标题：错误，
背景：集装箱(
颜色：主题。背景。原色，
),
),
扩展高度：120，
),

---

我从

fontSize

中取的

20.0

。

你希望它看起来怎么样？位置还可以，我只想展示整个title@Guillaume老实说，我只是测试了一些值，160在我的屏幕上看起来不错。@Guillaume我在下面发布了我的发现，说明为什么上面需要使用

160

。它只适用于320dp宽的屏幕，您应该除以

1.5

，使其在任何地方都能工作。直到有一天有一个合适的解决方案。

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