标签: flutter-sliver

我正在尝试使用Flutter重新创建在弹性空间中具有重叠内容的应用栏滚动。

该行为在此处演示：

http://karthikraj.net/2016/12/24/scrolling-behavior-for-appbars-in-android/

我已经使用SliverAppBar创建了折叠的AppBar，使用我在此处粘贴的代码，我正在尝试创建此

我无法使用Stack，因为我找不到任何onScroll回调，到目前为止，我已使用flexibleSpace创建了应用栏，该应用栏在滚动时折叠：

Scaffold(
    body: NestedScrollView(
      headerSliverBuilder:
          (BuildContext context, bool innerBoxIsScrolled) => <Widget>[
                SliverAppBar(
                  forceElevated: innerBoxIsScrolled,
                  pinned: true,
                  expandedHeight: 180.0,
                ),
              ],
      body: ListView.builder(
        itemCount: 30,
        itemBuilder: (context, index) => Text(
              "Item $index",
              style: Theme.of(context).textTheme.display1,
            ),
      ),
    ),
  );

编辑：我要创建的示例

我正在尝试从早期的 Material 设计规范（为动画演示打开）中重现以下示例：

直到现在我已经能够产生滚动效果，但是仍然缺少内容的重叠。我不知道如何正确地做到这一点。

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            title: Text('Title'),
            expandedHeight: 200.0,
            primary: true,
            pinned: true,
          ),
          SliverFixedExtentList(
            itemExtent: 30.0,
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int i) => Text('Item $i')
            ),
          ),
        ],
      ),
    );
  }
}

我正在尝试将PageView哪些页面可垂直滚动到CustomScrollView。

进行此设置的原因是我想使用SliverAppBar。如果开始垂直滚动，则AppBar开始缩小，最终停靠在屏幕顶部。同时扩展当前活动页面的内容。一旦停靠了AppBar并且页面的内容达到其允许的最大大小，它本身就会开始滚动。

我遇到了各种各样的问题，大多数都是规模无限制的问题。

Can a layout like this be achieved and rendered efficiently in Flutter?

Example:

Yellow and blue blocks can both be around 30 elements, so I guess something like ListView.builder should be used.

I have tried nesting 2 ListView.builder, the inner with shrinkWrap = true. The yellow block is being built just when is needed, but the blue list, although it has an itemBuilder, it builds all children elements at once, causing performance problems.

new ListView.builder(
  itemCount: 20,
  itemBuilder: (BuildContext context, …

我是新手，无法实现所需的布局。

我有一个带有3个标签的sliverAppBar。选项卡之一的内容必须是ScrollView化合物，由一个具有固定大小（以图像为背景）的容器和一个ListView组成。

我试图用CustomScrollView做到这一点，但我不知道如何创建容器，因为它不是条子。

你能为我指出正确的方向吗？

问候，迭戈。

我正在使用 SliverAppBar 测试代码并制作这个小部件，但有一个问题，我想隐藏顶部栏，当 SliverAppbar 展开时，它有“2 个图标和标题“类别页面”，但当我向上滚动时，它必须显示并隐藏 flexSpace

这是我的代码

 return Scaffold(
  body: CustomScrollView(
    slivers: <Widget>[
      SliverAppBar(
        expandedHeight: 200,
        floating: false,
        pinned: true,
        snap: false,
        title: AppBar(),
        centerTitle: true,

        flexibleSpace: FlexibleSpaceBar(
          background: CenterAppBar(),
          // centerTitle: false,
          // titlePadding: EdgeInsets.all(0),
          // background: AppBar(),
        ),
      ),
      SliverList(
        delegate: SliverChildListDelegate([
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
                        CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
                        CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
          CategoryCard(),
        ]),
      )
    ],
  ),
);

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

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

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

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

这是我的代码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：

我有一个包含视频的 SliverPersistentHeader。此视图所需的行为是，当用户向上滚动时，视图应覆盖或最小化视频的大小。视频标题是一个包含 Chewie 视频播放器的小部件。所需的行为会达到某个点，此时我会出现像素溢出，如该动画所示：

当滚动到达某个点时，视频无法再调整大小，从而导致渲染溢出。所需的行为是视频继续调整大小直到消失，或者捕获错误并从视图中隐藏或删除视频。呈现此滚动视图的代码是：

  Widget buildScollView(GenericScreenModel model) {
    return CustomScrollView(
      slivers: [
        StandardHeader(),
        SliverFillRemaining(
          child: Container(
            // color: Colors.transparent,
              decoration: BoxDecoration(
                  border: Border.all(
                    color: Colors.white,
                  ),
                  borderRadius: BorderRadius.only(topRight: radius, topLeft: radius)),
              child: Padding(
                padding: const EdgeInsets.all(20.0),
                child: Text(model.model?.getContentText ?? 'Empty'),
              )),
        )
      ],
    );
  }

StandardHeader 类是一个包含 Chewie 视频的简单小部件。

class _StandardHeaderState extends State<StandardHeader> {
  @override
  Widget build(BuildContext context) {
    return SliverPersistentHeader(
      floating: true,
      delegate: Delegate(
        Colors.blue,
        'Header Title',
      ),
      pinned: true,
    );
  }
}

有没有办法捕获此错误并隐藏视频播放器？任何人都可以帮忙解决这个问题或向我指出资源吗？谢谢！

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

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: …