如何动态更改 SliverAppBar 高度答案

【问题标题】：How to change SliverAppBar height dynamically如何动态更改 SliverAppBar 高度
【发布时间】：2019-03-08 10:17:09
【问题描述】：

我显示来自网络的图像，在滚动时会缩小。我想显示没有填充或裁剪的整个图像。但是，如果我用expandHeight 注释行- 没有图像- 只有appbar 的高度。有没有可以根据上传图片大小改变大小的小部件？

CustomScrollView(
  controller: controller,
  key: listKey,
  slivers: <Widget>[
    SliverAppBar(
    //  expandedHeight: 200.0,
      flexibleSpace: FlexibleSpaceBar(
        background: getHeroWidget(
            _conference.dbId,
            FadeInImage.assetNetwork(
              placeholder: conf_img_placeholder,
              image: _conference.info.image,
              fit: BoxFit.cover,
            )),
        title: Text(conference_title),
        centerTitle: true,
      ),
      pinned: true,
    ),

【问题讨论】：

您可以使用 SliverPersistentHeader 制作自己的 sliverappbar
我已经尝试过，但无法使用相同的折叠物理创建它。还有一个问题 - 我没有图像的高度
图像提供者（AssetImage 或 NetworkImage）拥有该信息
以这种方式计算高度存在一些困难，但它有帮助。谢谢

标签： flutter

【解决方案1】：

我一直在寻找这个问题，我用 NestedScrollView 和一个插件 SliverStickyHeader

找到了解决方案

这是我的做法，

Scaffold(
  body: SafeArea(
    child: NestedScrollView(
      headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
        return <Widget>[
          SliverStickyHeader(
            sticky: false,
            header: Container(
              color: Theme.of(context).primaryColor,
              child: Column(
                children: [
                  Text(
                    'Header',
                    style: Theme.of(context).textTheme.headline6,
                  ),
                  Text(
                    'Header',
                    style: Theme.of(context).textTheme.headline5,
                  ),
                  Text(
                    'Header',
                    style: Theme.of(context).textTheme.headline4,
                  ),
                  Text(
                    'Header',
                    style: Theme.of(context).textTheme.headline3,
                  ),
                ],
              ),
            ),
          )
        ];
      },
      body: Column(
        children: [
          AppBar(
            title: Text('My List items'),
          ),
          Expanded(
            child: ListView.builder(itemBuilder: (context, i) {
              return ListTile(
                leading: CircleAvatar(child: Text('$i')),
                title: Text('Appbar with dynamic height'),
              );
            }),
          ),
        ],
      ),
    ),
  ),
);

它满足了我的要求，插件也完全支持 Sliver 功能，但我只将它用作标题。我希望它会有所帮助。

【讨论】：

【解决方案2】：

最后我创建了自定义 SliverAppBar。出现另一个问题 - 状态栏的宽度，计算时必须考虑。

import 'dart:ui' as ui;

class _HeaderBar extends StatefulWidget {    
  @override
  State<StatefulWidget> createState() => _HeaderState();
}

class _HeaderState extends State<_HeaderBar> {
  @override
  Widget build(BuildContext context) {
    Image image = Image.network(...);
    Completer<ui.Image> completer = new Completer<ui.Image>();
    image.image.resolve(ImageConfiguration()).addListener((ImageInfo info, bool _) {
      completer.complete(info.image);
    });
    final double statusBarHeight = MediaQuery.of(context).padding.top;
    return FutureBuilder(
        future: completer.future,
        builder: (context, AsyncSnapshot<ui.Image> snapshot) {
          return SliverAppBar(
                  expandedHeight: snapshot.hasData
                ? MediaQuery.of(context).size.width / snapshot.data.width.toDouble() * snapshot.data.height.toDouble() -
                    statusBarHeight
                : 0.0,
...

【讨论】：