CustomScrollView Flutter中的复杂条子

本文介绍了CustomScrollView Flutter中的复杂条子的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 目前，我有FeaturedBlock列表。特色块包含标题和产品列表。因此，问题在于我不确定如何将该块（带有gridList的标题）添加到CustomScrollView。因此结构为：Currently I have List of FeaturedBlock. Featured block contains header and list of products. So the problem is that I'm not sure how to add that block(header with gridList) to CustomScrollView. So the structure is:--------------|SliverAppBar|--------------...some elements--------------| Header | ----> Featured Block header-------------------- -------| | | | ----> Featured Block products| | | |------ ------------- -------| | | || | | |------ ---------------------| Header | ----> Featured Block header-------------------- -------| | | | ----> Featured Block products| | | |------ ------------- -------| | | || | | |------ -------因此，如何将FeaturedBlock转换为Sliver So, how to convert FeaturedBlock to Sliver element?推荐答案您可以在 下面复制粘贴运行完整代码可以使用 SliverPersistentHeader 和 SliverGrid.count 并根据您的请求更改 crossAxisCount 工作演示You can copy paste run full code below You can use SliverPersistentHeader and SliverGrid.count and change crossAxisCount per your request working demo 完整代码import 'package:flutter/material.dart';import 'dart:math' as math;void main() => runApp(MyApp());class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('Collapsing List Demo')), body: CollapsingList(), ), ); }}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; }}class CollapsingList extends StatelessWidget { SliverPersistentHeader makeHeader(String headerText) { return SliverPersistentHeader( pinned: true, delegate: _SliverAppBarDelegate( minHeight: 60.0, maxHeight: 200.0, child: Container( color: Colors.lightBlue, child: Center(child: Text(headerText))), ), ); } @override Widget build(BuildContext context) { return CustomScrollView( slivers: <Widget>[ SliverAppBar( title: Text('SliverAppBar'), backgroundColor: Colors.green, expandedHeight: 200.0, flexibleSpace: FlexibleSpaceBar( background: Image.network('https://picsum.photos/250?image=9', fit: BoxFit.cover), ), ), makeHeader('Header Section 1'), SliverGrid.count( crossAxisCount: 2, children: [ Container(color: Colors.red, height: 150.0), Container(color: Colors.purple, height: 150.0), Container(color: Colors.green, height: 150.0), Container(color: Colors.orange, height: 150.0), ], ), makeHeader('Header Section 2'), SliverGrid.count( crossAxisCount: 2, children: [ Container(color: Colors.red, height: 150.0), Container(color: Colors.purple, height: 150.0), Container(color: Colors.green, height: 150.0), Container(color: Colors.orange, height: 150.0), ], ), makeHeader('Header Section 3'), SliverGrid.count( crossAxisCount: 2, children: [ Container(color: Colors.red, height: 150.0), Container(color: Colors.purple, height: 150.0), Container(color: Colors.green, height: 150.0), Container(color: Colors.orange, height: 150.0), ], ), makeHeader('Header Section 4'), SliverGrid.count( crossAxisCount: 2, children: [ Container(color: Colors.red, height: 150.0), Container(color: Colors.purple, height: 150.0), Container(color: Colors.green, height: 150.0), Container(color: Colors.orange, height: 150.0), ], ), ], ); }}工作演示2 完整代码2 import 'package:flutter/material.dart';import 'dart:math' as math;void main() => runApp(MyApp());List<Widget> widgetList = [];class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppState();}class _MyAppState extends State<MyApp> { int count = 0; SliverPersistentHeader makeHeader(String headerText) { return SliverPersistentHeader( pinned: true, delegate: _SliverAppBarDelegate( minHeight: 60.0, maxHeight: 200.0, child: Container( color: Colors.lightBlue, child: Center(child: Text(headerText))), ), ); } void _add() { count = count + 1; widgetList.add(makeHeader(count.toString())); widgetList.add( SliverGrid.count( crossAxisCount: 2, children: [ Container(color: Colors.red, height: 150.0), Container(color: Colors.purple, height: 150.0), Container(color: Colors.green, height: 150.0), Container(color: Colors.orange, height: 150.0), ], ), ); setState(() {}); } @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('Collapsing List Demo')), body: CollapsingList(), floatingActionButton: FloatingActionButton( onPressed: _add, tooltip: 'Increment', child: Icon(Icons.add), ), ), ); }}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; }}class CollapsingList extends StatelessWidget { @override Widget build(BuildContext context) { return CustomScrollView( slivers: <Widget>[ SliverAppBar( title: Text('SliverAppBar'), backgroundColor: Colors.green, expandedHeight: 200.0, flexibleSpace: FlexibleSpaceBar( background: Image.network('https://picsum.photos/250?image=9', fit: BoxFit.cover), ), ), ...widgetList ], ); }} 这篇关于CustomScrollView Flutter中的复杂条子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！