颤振 - 银子布局 银子列表内的水平滚动

Question

我尝试在银子列表中制作水平可滚动列表(自定义滚动视图 - 银子列表(

这是我的代码：

import 'package:flutter/material.dart';
class DetailScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
DetailAppBar(),
SliverPadding(
padding: EdgeInsets.all(16.0),
sliver: SliverList(
delegate: SliverChildListDelegate(
[
Card(child: Text('data'),),
Card(child: Text('data'),),
Card(child: Text('data'),),
Card(child: Text('data'),),
// Scrollable horizontal widget here
],
),
),
),
],
),
bottomNavigationBar: NavigationButton());

}
}

你能给我举个例子或这个案例的解决方案吗？ 我真的需要一些帮助。

Answer 1

在SliverToBoxAdapter中使用ListView。

@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverPadding(
padding: EdgeInsets.all(16.0),
sliver: SliverList(
delegate: SliverChildListDelegate(
[
Card(
child: Text('data'),
),
Card(
child: Text('data'),
),
Card(
child: Text('data'),
),
Card(
child: Text('data'),
),
],
),
),
),
SliverToBoxAdapter(
child: Container(
height: 100.0,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 10,
itemBuilder: (context, index) {
return Container(
width: 100.0,
child: Card(
child: Text('data'),
),
);
},
),
),
),
],
),
);
}

Answer 2

另一个解决方案对我不起作用，因为当我使用ListView时它会出错

这是我写的一个名为HorizontalSliverList的课程，它的工作既好又容易

以下是您需要复制的类：

class HorizontalSliverList extends StatelessWidget {
final List<Widget> children;
final EdgeInsets listPadding;
final Widget divider;
const HorizontalSliverList({
Key key,
@required this.children,
this.listPadding = const EdgeInsets.all(8),
this.divider,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return SliverToBoxAdapter(
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Padding(
padding: listPadding,
child: Row(children: [
for (var i = 0; i < children.length; i++) ...[
children[i],
if (i != children.length - 1) addDivider(),
],
]),
),
),
);
}
Widget addDivider() => divider ?? Padding(padding: const EdgeInsets.symmetric(horizontal: 8));
}