dart 如何给予顶部填充滚动条在 Flutter

gfttwv5a  于 12个月前  发布在  Flutter
关注(0)|答案(1)|浏览(130)
  • 我已经尝试了各种方法来应用顶部填充到滚动条,但我还没有成功。* 提前感谢..
import 'package:flutter/material.dart';

class MyScrollableWidget extends StatefulWidget {
  @override
  _MyScrollableWidgetState createState() => _MyScrollableWidgetState();
}

class _MyScrollableWidgetState extends State<MyScrollableWidget> {
  final ScrollController _scrollController = ScrollController();
  double _opacity = 1.0;

  @override
  void initState() {
    super.initState();
    
    _scrollController.addListener(() {
      setState(() {
        // Add your animation logic here based on scroll offset
        _opacity = _scrollController.offset > 100 ? 0.0 : 1.0;
      });
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hey there'),
      ),
      body: Theme(
        data: ThemeData(
          scrollbarTheme: ScrollbarThemeData(
            thumbColor: MaterialStatePropertyAll(Colors.red)
          )
        ),
        child: Scrollbar(
          
         // controller: _scrollController,
          isAlwaysShown: true,
          child: ListView.builder(
            //controller: _scrollController,
            itemCount: 100,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text('Item $index'),
              );
            },
          ),
        ),
      ),
      floatingActionButton: AnimatedOpacity(
        opacity: _opacity,
        duration: Duration(milliseconds: 500),
        child: FloatingActionButton(
          onPressed: () {
            // Your FAB logic here
          },
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

字符串


的数据

slwdgvem

slwdgvem1#

ScrollbarThemeData中添加mainAxisMargin以获得滚动条上方的填充。

const ScrollbarThemeData(
        thumbColor: MaterialStatePropertyAll(Colors.red),
        mainAxisMargin: 40,
      ),

字符串
希望它能起作用。

相关问题