是否有与 Bootstrap Scrollspy 等效的 Flutter？

Posted 2023-02-23

【中文标题】是否有与 Bootstrap Scrollspy 等效的 Flutter？

【英文标题】：Is there a Flutter equivalent to Bootstrap Scrollspy?

【发布时间】：2021-05-30 12:32:35

【问题描述】：

我在找一个和Bootstrap的Scrollspy相当的flutter包：

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

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

例如：

Section1 !!!Section2!!! Section3 Section4 ——————————————————————— （Section1 不可见）

!!!Section2!!!

Item3

Item4

第 3 节

Item1

Item2

第 4 节

Item5

Item6

【参考方案1】：

我认为您可以使用 Google Fuchsia Authors 制作的 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,
            ),
          ),
        ],
      ),
    );