首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >带有水平滚动和粘性头的颤振SliverList

带有水平滚动和粘性头的颤振SliverList
EN

Stack Overflow用户
提问于 2022-03-21 09:09:22
回答 1查看 1.4K关注 0票数 2

我已经试了一段时间了,但我不能让它开始工作。

我想在带有CustomScrollViewCupertinoSliverNavigationBar中创建一个列表视图。SliverList必须是水平滚动的。此外,它应该有一个标题行,它坚持到视图的顶部。

请参见这里的示例:https://dartpad.dev/?id=38c0825f27c1b3395dd22794a2567e64。注意身体可以水平滚动。

我想让红色标题行变得粘稠,这样在蓝色内容滚动时,它始终是可见的。

问题是标题行必须位于SingleChildScrollViewSizedBox中,否则它将没有所需的宽度。但一旦它在里面,我就不能再让它粘稠了。

非常感谢你的指点。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-04-01 16:57:09

解决方案^^使用SliverPersistentHeader使红色标题行粘稠,并使用SliverList而不是ListView。

代码语言:javascript
运行
复制
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'dart:math' as math;

class HomePage extends StatelessWidget {
   const HomePage({Key? key}) : super(key: key);


 @override
   Widget build(BuildContext context) {
final scrollController = ScrollController();
return MaterialApp(
  home: Scaffold(
    body: CustomScrollView(
      slivers: [
        const CupertinoSliverNavigationBar(
          largeTitle: Text('Search'),
        ),
        //CupertinoSliverRefreshControl(),
        SliverPersistentHeader(
          pinned: true,
          delegate: _SliverAppBarDelegate(
            minHeight: 20.0,
            maxHeight: 30.0,
            child: Container(
                color: Colors.red, child: Center(child:
            Text("red header "))),
          ),
        ),

        SliverList(
          delegate: SliverChildListDelegate(
            List.generate(80, (index) => Container(
              padding: const EdgeInsets.all(5),
              color: Colors.blueAccent.shade100,
              child: const Text('bar'),
            )),
          ),
        ),

       ],
    ),
  ),
);
   }
}

class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
   _SliverAppBarDelegate({
       required this.minHeight,
      required this.maxHeight,
      required this.child,
    });

    final double minHeight;
    final double maxHeight;
    final Widget child;

    @override
     double get minExtent => minHeight;

    @override
     double get maxExtent => math.max(maxHeight, minHeight);

    @override
     Widget build(BuildContext context,
      double shrinkOffset,
      bool overlapsContent) {
     return new SizedBox.expand(child: child);
      }

    @override
    bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
      return maxHeight != oldDelegate.maxHeight ||
      minHeight != oldDelegate.minHeight ||
       child != oldDelegate.child;
    }
   }
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/71555118

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档