标签: sliverappbar

我正在尝试为应用程序创建一个事件页面，用户可以在其中查看具有横幅图像和其他一些有用信息的事件。我真的很喜欢用横幅实现 SliverAppBar 的想法，以便用户可以滚动查看更多信息。为此，我似乎需要一个带有 SliverAppBar 和FlexibleSpaceBar 的 CustomScrollView 。

我在网上看到的所有教程都假设屏幕的其余部分应该是各种列表，但我更想要像“列”小部件之类的东西。但是，Column 的高度不受限制，这会导致 CustomScrollView 中出现溢出错误。我可以将它包装在指定高度的容器中，但是主体的内容是可变大小的，所以这并不理想。有没有办法让 SliverAppBar 和 Column 并排工作？

我想要类似这样的东西：

class ActivityPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(slivers: [
          SliverAppBar(
            flexibleSpace: FlexibleSpaceBar(
              background: Image(someImage),
            ),
            expandedHeight: Image,
            floating: false,
            pinned: true,
            snap: false,
          ),
          Column(
            children: [
              someChildren,
            ]
            ),
          )
        ]),
      ),
    );
  }

这应该是可能的，因为在我看来，这似乎是一种常见的模式，但我环顾四周，只能找到主体由列表组成的示例......

这是一个用于创建最小可重现示例的存储库。

我想SliverAppBar在ScrollablePositionedList.builder滚动时隐藏。这是我在此处包含的相关代码段。

          NestedScrollView(
              headerSliverBuilder: (context, innerBoxIsScrolled) => [
                    SliverAppBar(
                      backgroundColor: Colors.blue,
                      expandedHeight: 112,
                      snap: true,
                      pinned: false,
                      floating: true,
                      forceElevated: true,
                      actions: <Widget>[
                        IconButton(
                          icon: Icon(Icons.event),
                        )
                      ],
                      flexibleSpace: SafeArea(
                        child: Column(
                          children: <Widget>[
                            Container(
                              height: kToolbarHeight,
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.center,
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: <Widget>[
                                  Text(
                                    'Title',
                                    style: Theme.of(context)
                                        .textTheme
                                        .title
                                        .copyWith(
                                            fontSize: 16, color: Colors.white),
                                  ),
                                  SizedBox(
                                    height: 2,
                                  ),
                                  Text(
                                    'Date',
                                    style: Theme.of(context)
                                        .textTheme
                                        .caption
                                        .copyWith(
                                            fontSize: 10, color: Colors.white),
                                  ), …

我NestedScrollView在这里使用并尝试将一个参数放入函数中内置的参数TabBar中。工作正常，但看起来已经节省了一些空间，这使得标签栏看起来很奇怪，上面有大的填充。知道如何删除这个空间吗？提前致谢。bottomSliverAppBarheaderSliverBuilderTabBarSliverAppBartitle

动图

 @override
  Widget build(BuildContext context) {
    double screenWidth = MediaQuery.of(context).size.width;
    double screenHeight = MediaQuery.of(context).size.height;
    return Scaffold(
      body: SafeArea(
          child: NestedScrollView(
            headerSliverBuilder: (context, value){
              return[
                SliverOverlapAbsorber(
                  handle:NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                  sliver: SliverAppBar(
                    pinned: true,
                    floating: false,
                    expandedHeight: 500,
                    title: Text("Space that I don't want"),
                    centerTitle: true,
                    flexibleSpace: FlexibleSpaceBar(
                      collapseMode: CollapseMode.pin,
                      background: Container(
                        decoration: BoxDecoration(
                          color: Colors.white,
                          image: DecorationImage(
                            image: AssetImage("assets/images/classroom.png")
                          )
                        ),
                        child: Center(child: Text("Today's lesson cancelled", style: GoogleFonts.montserrat(textStyle: TextStyle(color: Colors.white, fontSize:20, fontWeight: …

问题：

为什么flexibleSpace当我向上滚动时，里面的内容没有隐藏？

这是我的代码：

class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
  return Scaffold(
    body: CustomScrollView(
      physics: PageScrollPhysics(),
      slivers: [
        SliverAppBar(
          title: Text('Dashboard'),
          actions: [
            CircleAvatar(
              backgroundColor: Colors.transparent,
              backgroundImage: NetworkImage('https://i.pinimg.com/originals/da/51/c2/da51c26fe3398b0f8314fee17a98e0e7.jpg'),
            ),
            SizedBox(width: 10.0),
          ],
          floating: false,
          pinned: true,
          expandedHeight: 300.0,
          flexibleSpace: Stack(
            children: <Widget>[
              Positioned.fill(
                child: Image.network(
                  "https://images.wallpapersden.com/image/download/colorful-neon-bubbles_a2dtaWmUmZqaraWkpJRmbmdlrWZlbWU.jpg",
                  fit: BoxFit.cover,
                )
              ),
              Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Text('Join as our member now,\nget discount upto 70%', style: TextStyle(color: Colors.white),),
                    SizedBox(height: 8.0),
                    RaisedButton(
                      child: Text('Subscribe …

我很难制作自定义折叠工具栏，下面附有正常情况下的视频。

然后这是不当行为的屏幕记录，大多数时候都会发生这种情况。

除了滚动不是那么快之外，您会在第二个视频中看到顶部的条子没有完全折叠。

您对提高应用程序的性能有什么建议以及解决错误的方法吗？

这是我的代码SliverPersistentHeaderDelegate

class DashboardHeaderPersistentDelegate extends SliverPersistentHeaderDelegate {

...

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {

    double shrinkPercentage = min(1, shrinkOffset / (maxExtent - minExtent));
    double titleTopMargin = titleCollapsedTopPadding +
        (titleExpandedTopPadding - titleCollapsedTopPadding) *
            (1 - shrinkPercentage);
    double titleFontSize = titleCollapsedFontSize +
        (titleExpandedFontSize - titleCollapsedFontSize) *
            (1 - shrinkPercentage);
    double infoWidgetHeight = minExtent +
        (maxExtent - minExtent) -
        shrinkOffset -
        titleTopMargin -
        titleFontSize -
        44;
    double collapasedInfoOpacity = max(0, shrinkPercentage-.7)/.3;

    return Material(
      elevation: 0, …

我对 Appbar 有这些要求，但我找不到解决它们的方法。

• 当拉伸，AppBar具有以显示两个图像一个在另一个上方的标题必须被隐藏。
• 当关闭，AppBar有显示标题和两幅图像滚动时按比例缩小，并移至标题两侧。滚动时标题变得可见。

我创建了几个模型来帮助获得所需的结果。

这是拉伸时的 Appbar：

这是关闭时的 Appbar：

我用条子做了一些类似的事情

import 'package:flutter/material.dart';

class ProfilePage extends StatefulWidget {
  @override
  _ProfilePageState createState() => _ProfilePageState();
}

class _ProfilePageState extends State<ProfilePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
              child: DefaultTabController(
          length: 4,
          child: NestedScrollView(
            body: TabBarView(children: [
             //pages of tabBar
            ]),
            headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
              return [
              SliverAppBar(
//for the pinned appBar
               
                                elevation: 0.0,
                                backgroundColor: Colors.red,
                                leading:   Padding(
                                  padding: const EdgeInsets.all(8.0),
                                  child: CircleAvatar(backgroundColor: Colors.red.withOpacity(0.4),
                                  child: Icon(Icons.arrow_back,color: Colors.white,),
                                  ),
                                ),
                pinned: true,
                flexibleSpace: FlexibleSpaceBar(
                      background: Image.network(
                    "https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&h=350",
                    fit: …

我正在尝试制作一个在移动设备和桌面设备上运行良好的响应式页面。我在 NestedScrollView 中使用 SliverAppBar。问题是 NestedScrollView 中完全忽略了对容器的 maxwidth 约束。此行为也与 CustomScrollView 相同。

如何限制 NestedScrollView 主体小部件中容器的大小。

下面是代码：

import "dart:math";
import "package:flutter/material.dart";

class ResponsiveSliver extends StatefulWidget {
  static const routeName = 'responsive-sliver';

  @override
  _ResponsiveSliverState createState() => _ResponsiveSliverState();
}

class _ResponsiveSliverState extends State<ResponsiveSliver> with SingleTickerProviderStateMixin {
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        floatHeaderSlivers: true,
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              title: Text(
                "Responsive Sliver",
              ),
              centerTitle: true,
              pinned: true,
              floating: true,
            ),
          ];
        },
        body: ConstrainedBox(
          constraints: BoxConstraints(maxWidth: 200), …

我在里面有“下一个”和“上一个”按钮flexibleSpace，如下所示，“下一个”和“上一个”按钮的文本在滚动时隐藏，但向前和向后箭头不隐藏。我希望它们在滚动时隐藏。

这是我的代码

            SliverAppBar(
              backgroundColor: selectedColor ?? Colors.blue,
              expandedHeight: 112,
              snap: true,
              pinned: false,
              floating: true,
              forceElevated: true,
              actions: <Widget>[
                IconButton(
                    icon: Icon(Icons.event),
                    onPressed: () {
                      DateTime now = DateTime.now();
                      _selectDate(context, now);
                    })
              ],
              flexibleSpace: selectedTitle != null ? SafeArea(
                child: Column(
                  children: <Widget>[
                    Container(
                      height: kToolbarHeight,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          Text(
                            selectedTitle?.toUpperCase() ?? '',
                            style: Theme
                                .of(context)
                                .textTheme
                                .title
                                .copyWith(fontSize: 16, color: Colors.white),
                          ),
                          SizedBox(
                            height: 2,
                          ),
                          isWeekly
                              ? SizedBox(
                            height: 0,
                            width: …

我真的很喜欢使用 Slivers，但 SliverAppBar 确实有一个问题：通常，我使用 SliverAppBar Widget 来创建一个具有视差效果背景图像的 AppBar。所以我只使用灵活的空间，不幸的是，每当你向下滚动时，它就会被 AppBar 部分挡住。我尝试通过将颜色值设置为透明来使 AppBar 部分透明，但它所做的只是使整个事物（包括弹性空间）透明。

有没有一种方法可以仅使用 SliverAppBar 的弹性空间，而不会在向下滚动时淡入 AppBar 部分？

这是我使用的代码：

SliverAppBar(
          expandedHeight: 220,
          pinned: false,
          forceElevated: true,
          backgroundColor: Colors.transparent,
          stretch: true,
          leading: Container(),
          flexibleSpace: FlexibleSpaceBar(
            collapseMode: CollapseMode.pin,
            background:Stack(
              children: <Widget>[
                Image(
                  fit: BoxFit.cover,
                  width: MediaQuery.of(context).size.width,
                  image: AssetImage('assets/images/image2.png'),
                ),
                Positioned(
                  bottom: 0,
                  child: Container(
                    height: 110,
                    width: MediaQuery.of(context).size.width,
                    color: Colors.grey,
                  ),
                ),
                Positioned(
                  bottom: 10,
                  left: 10,
                  child: CircleAvatar(
                    radius: 45,
                    backgroundImage: AssetImage('assets/images/image.png'),
                  ),
                ),
                Positioned(
                  bottom: 77,
                  left: 110,
                  child: Container(
                    width: …

我正在尝试复制带有图像的 SliverAppBar 自然附带的文本收缩效果，以便 sliverhead 的背景图像收缩为 sliverAppBar 的应用栏中的前导图标。

我尝试使用 AnimatedPostioned flutter 小部件以及滚动控制器，该控制器isSkrink在页面滚动时切换布尔值的状态。

下面是 AnimatedPosition 小部件：

AnimatedPositioned(
  width: isShrink ? 10.0 : 200.0,
  height: isShrink ? 10.0 : 200.0,
  duration: Duration(seconds: 2),
  curve: Curves.linear,
  child: Stack(
    children: [
      Container(
        child: Image.asset(
            'assets/images/user-avatar.png'),
      ),
    ],
  ),
),

下面是 SliverAppBar，其中 AnimatedPositioned 位于堆栈中，用户图标位于 SliverAppBar 的前导参数中

SliverAppBar(
  leading: isShrink
      ? Padding(
          padding: EdgeInsets.all(10),
          child: CircleAvatar(
            backgroundImage:
                AssetImage('assets/images/user-avatar.png'),
            backgroundColor: Colors.white,
            radius: 3,
          ),
        )
      : Container(),
  floating: true,
  pinned: true,
  flexibleSpace: FlexibleSpaceBar(
    title: Row(
      children: …

我想使用创建一个长条列表视图，SliverAppBar这样当我向上滚动列表时，主体内的图标会缩小以出现在leadingappBar的空间中。

这里的图像显示了我想要实现的目标。当我向上滚动时，图表应该向上移动并在标题旁边滑动。（类似于 Hero 小部件的东西）

直到现在，我尝试过SliverAppBar，但未能成功。我很高兴使用其他一些小部件来实现这一点。谢谢你。

我在Flutter文档的例子中写了一个NestedScrollView界面，但是当我看ListView作为body时，我发现ListView和SliverAppBar之间有一个奇怪的间隙。我该怎么做才能删除这个差距

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (context, boxIsScrolled) {
          return [
            SliverAppBar(
              pinned: true,
              expandedHeight: 100,
              flexibleSpace: FlexibleSpaceBar(
                collapseMode: CollapseMode.pin,
                background: Container(
                  color: Colors.red,
                ),
              ),
            ),
          ];
        },
        body: ListView.builder(
          itemBuilder: (BuildContext context, int index) {
            return Container(
              child: Text(
                "$index",
              ),
              color: Colors.green,
            );
          },
        ),
      ),
    );
  }
}