Flutter - Sliver 布局在 Sliver 列表中水平滚动 [英] Flutter - Sliver Layout horizontal scroll inside Sliver List

问题描述

我尝试在 Sliver List (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());


 }

}

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

Can you give me example or solution to this case? i really need some help.

推荐答案

在 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'),
                    ),
                  );
                },
              ),
            ),
          ),
        ],
      ),
    );
  }

这篇关于Flutter - Sliver 布局在 Sliver 列表中水平滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！