Flutter中实现页面上下滚动时FloatingActionButton滑动效果用什么组件？

你可以通过以下两种方案实现需求，可根据业务场景选择：

方案1：将FAB放入滚动容器内部 #

如果FAB属于页面内容的一部分，需要完全跟随内容上下滚动，直接把FAB代码放到ListView、SingleChildScrollView这类滚动组件的子组件列表中即可，示例代码如下：

SingleChildScrollView(
  child: Column(
    children: [
      // 其他页面内容
      const SizedBox(height: 1000,),
      // 你的原有FAB代码
      FloatingActionButton.extended(
        onPressed: () {
          print("hello world");
        },
        label: const Text('Update',style: TextStyle(color: Colors.white),),
        icon: const Icon(Icons.update_outlined,color: Colors.white,),
        backgroundColor: Colors.blue,
      ),
      const SizedBox(height: 20,),
    ],
  ),
)

方案2：保留悬浮特性的跟随滚动 #

如果需要FAB始终保持悬浮状态，仅跟随页面滚动调整位置，可以用ScrollController监听滚动偏移动态调整FAB的位置，示例如下：

• 首先定义控制器和默认偏移量

final ScrollController _scrollController = ScrollController();
double _fabBottomOffset = 20; // FAB默认距离底部的边距

• 初始化时添加滚动监听

@override
void initState() {
  super.initState();
  _scrollController.addListener(() {
    setState(() {
      // 滚动偏移计算逻辑可根据需求自定义调整
      _fabBottomOffset = 20 - _scrollController.offset;
    });
  });
}

• 页面结构用Stack嵌套实现

Stack(
  children: [
    ListView(
      controller: _scrollController,
      children: const [
        // 你的页面内容
        SizedBox(height: 1000,)
      ],
    ),
    Positioned(
      right: 20,
      // 设置最小底部边距避免FAB滑出屏幕
      bottom: _fabBottomOffset < 20 ? 20 : _fabBottomOffset,
      child: FloatingActionButton.extended(
        onPressed: () {
          print("hello world");
        },
        label: const Text('Update',style: TextStyle(color: Colors.white),),
        icon: const Icon(Icons.update_outlined,color: Colors.white,),
        backgroundColor: Colors.blue,
      ),
    )
  ],
)

• 页面销毁时释放控制器避免内存泄漏

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

内容的提问来源于stack exchange，提问作者emirşah erden