Flutter CustomScrollView 条子堆叠

Question

我正在尝试使用 CustomScrollView 创建滚动视图。我需要的效果与 this one.

非常相似

我需要 SliverList to be stacked above the SliverAppbar，而不需要列表占据整个屏幕并隐藏 SliverAppbar。我想这样做的原因是我需要在该列表的顶部附加一个持久的 Positioned 小部件，除非列表堆叠在 SliverAppbar 上方，否则它不会出现。

这是我的 code。

Answer 1

第一步： 在 SliverAppBar 小部件中使用 ListView。使cssoverflow:hidden效果

第二步： 将控制器添加到 NestedScrollView 并在堆栈中滚动时移动按钮。加上计算你想停止按钮移动的位置。

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  ScrollController scrollController;
  final double expandedHight = 150.0;

  @override
  void initState() {
    super.initState();
    scrollController = new ScrollController();
    scrollController.addListener(() => setState(() {}));
  }

  @override
  void dispose() {
    scrollController.dispose();
    super.dispose();
  }

  double get top {
    double res = expandedHight;
    if (scrollController.hasClients) {
      double offset = scrollController.offset;
      if (offset < (res - kToolbarHeight)) {
        res -= offset;
      } else {
        res = kToolbarHeight;
      }
    }
    return res;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Stack(
        children: [
          NestedScrollView(
            controller: scrollController,
            headerSliverBuilder: (context, value) {
              return [
                SliverAppBar(
                  pinned: true,
                  expandedHeight: expandedHight,
                  flexibleSpace: ListView(
                    physics: const NeverScrollableScrollPhysics(),
                    children: [
                      AppBar(
                        title: Text('AfroJack'),
                        elevation: 0.0,
                      ),
                      Container(
                        color: Colors.blue,
                        height: 100,
                        alignment: Alignment.center,
                        child: RaisedButton(
                          child: Text('folow'),
                          onPressed: () => print('folow pressed'),
                        ),
                      ),
                    ],
                  ),
                ),
              ];
            },
            body: ListView.builder(
              physics: const NeverScrollableScrollPhysics(),
              itemCount: 80,
              itemBuilder: (BuildContext context, int index) {
                return Text(
                  'text_string'.toUpperCase(),
                  style: TextStyle(
                    color: Colors.white,
                  ),
                );
              },
            ),
          ),
          Positioned(
            top: top,
            width: MediaQuery.of(context).size.width,
            child: Align(
              child: RaisedButton(
                onPressed: () => print('shuffle pressed'),
                child: Text('Suffle'),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Flutter CustomScrollView 条子堆叠

Flutter CustomScrollView slivers stacking

flutter

flutter-sliver