有没有等同于 Bootstrap Scrollspy 的 Flutter？

Question

我正在寻找一个与 Bootstrap 的 Scrollspy 相当的 flutter 包：

https://getbootstrap.com/docs/4.0/components/scrollspy/

预期的功能是有一个垂直滚动的项目列表，上面有一个粘性的水平滚动“header/navbar 菜单”。当用户滚动垂直列表并到达新的“部分”时，这会通过突出显示导航栏中的“部分名称”并在必要时滚动到它来反映在水平导航栏中。当用户按下水平导航栏中的某个部分名称时，它应该滚动到垂直列表中该部分的开头。

例如：

Section1 !!!Section2!!! Section3 Section4 —————————————————————— （第 1 节不可见）

！！！第2节！！！

Item3

Item4

第 3 节

Item1

Item2

第 4 节

Item5

Item6

Answer 1

我认为您可以使用 Google Fuchsia 作者制作的 scrollable_positioned_list package 来实现这一点。

ScrollablePositionedList 提供了 ItemPositionsListener:

_itemPositionsListener.itemPositions.addListener(() {
  final positions = _itemPositionsListener.itemPositions.value;
  setState(() {
    _topItem = positions.isNotEmpty ? positions.first.index : null;
  });
});

完整源代码

import 'package:flutter/material.dart';
import 'package:scrollable_positioned_list/scrollable_positioned_list.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: HomePage(),
    ),
  );
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final _nbItems = 6;
  final _itemHeight = 200.0;
  final _itemPositionsListener = ItemPositionsListener.create();

  int _topItem = 0;

  @override
  void initState() {
    super.initState();
    _itemPositionsListener.itemPositions.addListener(() {
      final positions = _itemPositionsListener.itemPositions.value;
      setState(() {
        _topItem = positions.isNotEmpty ? positions.first.index : null;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: List.generate(
              _nbItems,
              (index) => Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(
                  padding: EdgeInsets.all(4.0),
                  decoration: _topItem == index
                      ? BoxDecoration(
                          color: Colors.black26,
                          border: Border.all(color: Colors.black54),
                        )
                      : BoxDecoration(),
                  child: Text(
                    'S$index',
                    style: TextStyle(
                      fontWeight: _topItem == index
                          ? FontWeight.bold
                          : FontWeight.normal,
                    ),
                  ),
                ),
              ),
            ),
          ),
          Expanded(
            child: ScrollablePositionedList.builder(
              itemCount: _nbItems,
              itemBuilder: (context, index) => SizedBox(
                height: _itemHeight,
                child: Card(
                  child: Text('Item $index'),
                ),
              ),
              itemPositionsListener: _itemPositionsListener,
            ),
          ),
        ],
      ),
    );
  }
}

有没有等同于 Bootstrap Scrollspy 的 Flutter？

Is there a Flutter equivalent to Bootstrap Scrollspy?

listview

widget

flutter

flutter-web

singlechildscrollview

完整源代码