Question

我正在尝试显示标题，但是如您所见，它不能正确显示

。

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

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

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

您可能希望使用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),
),

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

Answer 3

我钻研了<div class="list-box"> <ul class="list"> <li class="item">item 1</li> <li class="item">item 2</li> <li class="item">item 3</li> <li class="item">item 4</li> </ul> </div>的资料，至少现在我知道会发生什么。事实证明，在展开状态下，FlexibleSpaceBar会放大到其大小的title，因此自然会在屏幕外溢出。当用户向上滚动时，1.5会缩小到其源大小title。以这种大小，它将位于顶部的工具栏中。

也许此信息将帮助某人解决问题，直到此问题解决为止。

我想知道为什么我用1.0用ConstraintedBox换行标题的破解方法不起作用。现在我知道：我必须将此maxWidth: MediaQuery.of(context).size.width除以maxWidth。

另请参阅Flutter github问题跟踪程序上的this bug。

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

我从here取来的20.0中的fontSize。

标题未在flexibleSpaceBar上正确显示

4 个答案: