flutter 标题未在flexibleSpaceBar上正确显示

y0u0uwnf  于 2023-01-14  发布在  Flutter
关注(0)|答案(4)|浏览(166)

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

我尝试将softWrap设置为true,但它仍然相同。
代码来自flutter contacts_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)],
                    ),
                  ),
                ),
              ],
            ),
          ),
eagi6jfj

eagi6jfj1#

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

vaj7vani2#

我深入研究了FlexibleSpaceBar源代码,至少现在我明白发生了什么。原来在展开状态下,title被放大到1.5的大小,所以它自然会溢出屏幕。当用户向上滚动时,title被缩小到1.0的源代码大小。在这个大小下,它将位于顶部工具栏中。
也许这些信息将帮助一些人根据他们的变通办法,直到这是固定的。
我想知道为什么我用maxWidth: MediaQuery.of(context).size.width Package ConstraintedBox中的title的方法不起作用。现在我知道了:我必须用maxWidth除这个数。
另请参见Flutter github问题跟踪器上的this bug

bvjxkvbb

bvjxkvbb3#

由于显而易见的原因,标题长度与您设置的字体大小无法在较小的设备上显示在一行中。
您可能希望使用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),
),
7fyelxc5

7fyelxc54#

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

20.0中的20.0是我从here中获取的。

相关问题