Flutter：如何设置 SliverAppBar 的高度？答案

【问题标题】：Flutter: How to set the height of a SliverAppBar?Flutter：如何设置 SliverAppBar 的高度？
【发布时间】：2019-05-01 16:18:35
【问题描述】：

我正在尝试使用 SliverAppBar。手机设备上的布局很好。但是，我用iPad测试布局时，AppBar的高度似乎没有变化，并且无法正常显示标题文字。

当我折叠 AppBar 时：

我也尝试将底部属性添加到 SliverAppBar，但它也不起作用。

bottom: PreferredSize(                       
   preferredSize: Size.fromHeight(60.0),      
   child: Text(''),                           
),

结果如下：

标题文本仍然受到不可见高度的限制。

我的代码：

new SliverAppBar(
        expandedHeight: Adapt.px(220.0),
        floating: false,
        elevation: 0.0,
        pinned: true,
        primary: true,
        centerTitle: true,
        title: Text("TITLE",
            style: TextStyle(
                color: Colors.white,
                fontSize: Adapt.px(45.0),
                fontFamily: "pinfon",
                fontWeight: FontWeight.w900,
                letterSpacing: 1.0)),
        backgroundColor: Colors.black45,
        brightness: Brightness.dark,
        bottom: PreferredSize(                       
            preferredSize: Size.fromHeight(60.0),      
            child: Text(''),                           
          ), 
        flexibleSpace: new FlexibleSpaceBar(
          background: Opacity(
            opacity: 0.5,
            child: new Stack(
              fit: StackFit.expand,
              children: <Widget>[
                new Image.asset(
                    "assets/images/back.jpg",
                    fit: BoxFit.fitWidth,
                  ),
              ],
            ),
          ),
        ),
      ),

【问题讨论】：

你为 sliverappbar 写了什么代码？你用过 expandedHeight:。能否请您也上传您的代码。
是的，我用过expandHeight，代码上传了。

标签： layout flutter appbar

【解决方案1】：

我已经测试了您提供的示例代码，使用 iPad Air - 第 4 代 - 14.0 模拟器时布局似乎工作正常。

不过，我看不到您的完整代码。我刚刚重用了您提供的最少代码并创建了一个完整的示例，以便能够查看输出。

这是我的示例代码：

import 'package:flutter/material.dart';

void main() => runApp(SilverAppBarExample());

class SilverAppBarExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: CustomScrollView(
          slivers: <Widget>[
            new SliverAppBar(
              expandedHeight: 220.0,
              floating: false,
              elevation: 0.0,
              pinned: true,
              primary: true,
              centerTitle: true,
              title: Text("TITLE",
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 45.0,
                      fontFamily: "pinfon",
                      fontWeight: FontWeight.w900,
                      letterSpacing: 1.0)),
              backgroundColor: Colors.black45,
              brightness: Brightness.dark,
              bottom: PreferredSize(
                preferredSize: Size.fromHeight(60.0),
                child: Text(''),
              ),
              flexibleSpace: new FlexibleSpaceBar(
                background: Opacity(
                  opacity: 0.5,
                  child: new Stack(
                    fit: StackFit.expand,
                    children: <Widget>[
                      new Image.asset(
                        "assets/background.jpg",
                        fit: BoxFit.fitWidth,
                      ),
                    ],
                  ),
                ),
              ),
            ),
            new SliverList(
                delegate: new SliverChildListDelegate(_buildList(50))),
          ],
        ),
      ),
    );
  }

  List _buildList(int count) {
    List<Widget> listItems = List();

    for (int i = 0; i < count; i++) {
      listItems.add(new Padding(
          padding: new EdgeInsets.all(20.0),
          child: new Text('Item ${i.toString()}',
              style: new TextStyle(fontSize: 25.0))));
    }

    return listItems;
  }
}

使用 iPad Air - 第 4 代 - 14.0 模拟器输出

扩展：

缩小：

看来SliverAppBar 工作正常。

我还在 iPhone 模拟器中对其进行了测试以进行验证。

iPhone SE - 第二代 - 14.0

扩展：

缩小：

这是一个实时输出：

也许如果您能提供您创建的全部代码，我们将能够检查它。

【讨论】：