Mobile 颤振-条子布局水平滚动内部条子列表

Mobile 颤振-条子布局水平滚动内部条子列表,mobile,layout,dart,flutter,Mobile,Layout,Dart,Flutter,我尝试在狭长列表(CustomScrollview-SliverList)中创建水平滚动列表 这是我的代码: import 'package:flutter/material.dart'; class DetailScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: CustomScrollView( sli

我尝试在狭长列表(CustomScrollview-SliverList)中创建水平滚动列表

这是我的代码:

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());


 }

}
导入“包装:颤振/材料.省道”;
类DetailScreen扩展了无状态小部件{
@凌驾
小部件构建(构建上下文){
返回脚手架(
正文:自定义滚动视图(
条子:[
DetailAppBar(),
填缝料(
填充:所有边缘设置(16.0),
银条:银条列表(
委托:SliverChildListDelegate(
[
卡片(子项:文本(“数据”),),
卡片(子项:文本(“数据”),),
卡片(子项:文本(“数据”),),
卡片(子项:文本(“数据”),),
//这里是可滚动的水平窗口小部件
],
),
),
),
],
),
bottomNavigationBar:NavigationButton());
}
}

你能给我举个例子或解决这个问题的办法吗?我真的需要一些帮助。

SliveToboxAdapter
中使用
列表视图

  @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'),
                    ),
                  );
                },
              ),
            ),
          ),
        ],
      ),
    );
  }
@覆盖
小部件构建(构建上下文){
返回脚手架(
正文:自定义滚动视图(
条子:[
填缝料(
填充:所有边缘设置(16.0),
银条:银条列表(
委托:SliverChildListDelegate(
[
卡片(
子项:文本(“数据”),
),
卡片(
子项:文本(“数据”),
),
卡片(
子项:文本(“数据”),
),
卡片(
子项:文本(“数据”),
),
],
),
),
),
滑动双轴适配器(
子:容器(
高度:100.0,
子项:ListView.builder(
滚动方向:轴水平,
物品计数:10,
itemBuilder:(上下文,索引){
返回容器(
宽度:100.0,
孩子:卡片(
子项:文本(“数据”),
),
);
},
),
),
),
],
),
);
}

另一种解决方案不适用于我,因为当我使用
列表视图时,它会出错

下面是我编写的一个名为
HorizontalSliverList
的类,它可以轻松地完成这项工作

这是您需要复制的类:

class HorizontalSliverList扩展了无状态小部件{
最后儿童名单;
最终边缘设置列表填充;
最终窗口小部件分割器;
常量水平滑动列表({
关键点,
@需要这个,孩子们,
this.listPadding=const EdgeInsets.all(8),
这个,分割器,,
}):super(key:key);
@凌驾
小部件构建(构建上下文){
回程滑动双轴适配器(
子:SingleChildScrollView(
滚动方向:轴水平,
孩子:填充(
填充:列表填充,
子对象:行(子对象:[
对于(var i=0;idivider??填充(填充:const EdgeInsets.symmetric(水平:8));
}

将滚动方向更改为水平方向。i、 e
scrollDirection:Axis.horizontal,
no,我指的是我的“//Scrollable horizontal widget here”中的widget。但是您的解决方案使所有小部件从上到下水平滚动如何使ListView高度响应而不指定容器的高度?由于ListView是如何工作的,您不能这样做。它们试图占用尽可能多的空间,但无法从另一个listview获取大小。您可以做的是计算项目的高度,并相应地设置listview的高度