flutter 在容器中 Package SliverList

ep6jt1vc 于 2023-02-05 发布在 Flutter

关注(0)|答案(1)|浏览(122)

模型

嗨，这是我想用flutter list list-expanded实现的目标
当用户向下滑动列表时，标题保持固定，而图像滑走。我试图用一些长条来达到这个效果。

问题

在我的例子中，我不能使用类似这样的东西，因为我列出的是 Package 在一个自定义容器中，如下所示：

@override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
          flexibleSpace: SvgPicture.asset('assets/icons/school_old.svg'),
          backgroundColor: Colors.black,
        ),
        SliverList(
        ....
        );
      ],
    );
  }

怎样才能达到预期的效果？
我尝试使用SliverToBoxAdapter，但这似乎不适用于我的情况

body: CustomScrollView(
    slivers: <Widget>[
      SliverAppBar(
        backgroundColor: Colors.red,
        flexibleSpace: Center(
          child: Text('hello world'),
        ),
      ),
      SliverToBoxAdapter(
        child: RoundedContainer(
            color: Colors.grey[900],
            child: ListView.builder(
              itemCount: 20,
              itemBuilder: (BuildContext context, int index) {
                return Padding(
                  padding: const EdgeInsets.only(bottom: 8),
                  child: RoundedContainer(
                    color: Colors.white,
                  ),
                );
              },
            )),
      ),
    ],
  ),

我哪里错了？

flutter

来源：https://stackoverflow.com/questions/58701653/wrap-sliverlist-in-a-container

1条答案

按热度按时间

9udxz4iz1#

我相信这可以通过使用SliverAppBar()和SliverList()来实现。实际上，文档中有很多示例。下面是其中一个示例：

import 'package:flutter/material.dart';

void main() => runApp(const AppBarApp());

class AppBarApp extends StatelessWidget {
  const AppBarApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: SliverAppBarExample(),
    );
  }
}

class SliverAppBarExample extends StatefulWidget {
  const SliverAppBarExample({super.key});

  @override
  State<SliverAppBarExample> createState() => _SliverAppBarExampleState();
}

class _SliverAppBarExampleState extends State<SliverAppBarExample> {
  bool _pinned = true;
  bool _snap = false;
  bool _floating = false;

// [SliverAppBar]s are typically used in [CustomScrollView.slivers], which in
// turn can be placed in a [Scaffold.body].
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            pinned: _pinned,
            snap: _snap,
            floating: _floating,
            expandedHeight: 160.0,
            flexibleSpace: const FlexibleSpaceBar(
              title: Text('SliverAppBar'),
              background: FlutterLogo(),
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                return Container(
                  color: index.isOdd ? Colors.white : Colors.black12,
                  height: 100.0,
                  child: Center(
                    child: Text('$index', textScaleFactor: 5),
                  ),
                );
              },
              childCount: 20,
            ),
          ),
        ],
      ),
    );
  }
}

输出：

赞(0）回复(0）举报 2023-02-05

我来回答

flutter 在容器中 Package SliverList

模型

问题

1条答案

相关问题

热门标签

最新问答