时间戳

首页 > 解决方案 > 如何在 Flutter 的 NestedScrollView 中设置 SliverAppBar 的最小高度

user-interface - 如何在 Flutter 的 NestedScrollView 中设置 SliverAppBar 的最小高度

问题描述

我想在普通的 Scaffold 应用程序中使用 NestedScrollView 中的 SliverAppBar。当用户向下滚动时，我还希望应用栏的最小高度。

我无法弄清楚如何使用 PreferredSize 小部件或任何其他在线找到的解决方案，例如this。

这是我目前的简化解决方案：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue, fontFamily: 'Oswald'),
      home: SliverHome(),
    );
  }
}

class SliverHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: testHome(),
    );
  }

  Widget testHome() {
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar( // this is where I would like to set some minimum constraint
              expandedHeight: 300,
              floating: false,
              pinned: true,
              flexibleSpace: Container(
                padding: EdgeInsets.all(10),
                height: 340,
                width: double.infinity,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.end,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Container(
                      height: 40,
                    ),
                    Container(
                      height: 60,
                    ),
                    Expanded(child: Container()),
                    Text('TEST'),
                  ],
                ),
                decoration: BoxDecoration(
                    image: DecorationImage(
                        image: NetworkImage('https://picsum.photos/400/400'),
                        fit: BoxFit.cover)),
              ),
            )
          ];
        },
        body: Container(),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => {},
        tooltip: '+',
        child: Icon(Icons.accessibility_new),
      ),
    );
  }
}

我想在 60 dp 附近停止缩小应用栏

截屏

标签： user-interfacedartflutter

解决方案

这实际上是一个请求的功能 - https://github.com/flutter/flutter/issues/21298

A work Around 是使用Bottom

SliverAppBar(
              // this is where I would like to set some minimum constraint
              expandedHeight: 300,
              floating: false,
              pinned: true,
              bottom: PreferredSize(                       // Add this code
                preferredSize: Size.fromHeight(60.0),      // Add this code
                child: Text(''),                           // Add this code
              ),                                           // Add this code
              flexibleSpace: Container(
                padding: EdgeInsets.all(10),
                height: 340,
                width: double.infinity,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.end,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Container(
                      height: 40,
                    ),
                    Container(
                      height: 60,
                    ),
                    Expanded(child: Container()),
                    Text('TEST'),
                  ],
                ),
                decoration: BoxDecoration(
                    image: DecorationImage(
                        image: NetworkImage('https://picsum.photos/400/400'),
                        fit: BoxFit.cover)),
              ),
            )

推荐阅读