flutter - Flutter 是否有相当于 Bootstrap Scrollspy 的工具？

Question

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

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

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

例如:

第 1 部分 !!!第 2 部分!!! 第 3 部分 第 4 部分———————————————————————(Section1 不可见)

!!!第2部分!!!

Item3

Item4

第三节

Item1

Item2

第 4 节

Item5

Item6

Answer 1

我认为您可以通过scrollable_positioned_list package来实现这一点由 Google Fuchsia 作者制作。

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