Flutter滚动时TextField显示异常求助:向下隐藏后向上无法恢复
解决方案
你的问题核心是ScrollController未绑定到可滚动的GridView组件,导致Hidable无法正确监听滚动行为,因此向上滚动时无法触发TextField的显示逻辑。
只需完成以下关键修改:
- 将
scrollController赋值给GridView.count的controller参数,让Hidable能获取到正确的滚动偏移数据。
修改后的完整代码:
class HomeScreen extends StatefulWidget { HomeScreen({Key? key}) : super(key: key); @override State<HomeScreen> createState() => _HomeScreenState(); } class _HomeScreenState extends State<HomeScreen> { final ScrollController scrollController = ScrollController(); @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.black, appBar: buildAppBar(), body: Stack( children: [ Container( margin: EdgeInsets.symmetric(horizontal: 20), child: Column( children: [ SizedBox(height: 15), Hidable( controller: scrollController, wOpacity: false, child: searchBox()), SizedBox(height: 15), Expanded( child: GridView.count( // 关键修改:绑定ScrollController到GridView controller: scrollController, physics: BouncingScrollPhysics(), crossAxisCount: 2, children: List.generate(22, (index) => GridItem()), ), ), ], ), ), Positioned( bottom: 20, right: 20, child: Container( padding: EdgeInsets.symmetric(vertical: 5), child: ElevatedButton( onPressed: () {}, style: ElevatedButton.styleFrom( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(30), ), primary: AppStyle.iconColor, minimumSize: Size(60, 60), elevation: 10, ), child: Text( '+', style: TextStyle(color: Colors.white, fontSize: 40), ), ), ), ), ], ), ); } Container searchBox() { return Container( margin: EdgeInsets.symmetric(horizontal: 15), decoration: BoxDecoration( color: AppStyle.itemColor, borderRadius: BorderRadius.circular(20), ), child: TextField( decoration: InputDecoration( contentPadding: EdgeInsets.all(0), prefixIcon: Icon( Icons.search, color: Colors.grey, size: 20, ), prefixIconConstraints: BoxConstraints( maxHeight: 20, minWidth: 25, ), border: InputBorder.none, hintText: "Search", hintStyle: TextStyle(color: Colors.grey), ), ), ); } AppBar buildAppBar() { return AppBar( backgroundColor: Colors.black, elevation: 0.0, title: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Padding( padding: const EdgeInsets.symmetric(horizontal: 20), child: Icon(Icons.square, size: 35), ), Padding( padding: const EdgeInsets.symmetric(horizontal: 20), child: Icon( Icons.square, size: 35, ), ), ], ), centerTitle: true, ); } }
若仍有细节需要调整,可修改Hidable的参数:
- 调整
threshold值,控制触发隐藏/显示的滚动距离阈值 - 设置
hideDirection: SlideDirection.up(默认即为向上隐藏,一般无需改动)
内容的提问来源于stack exchange,提问作者AmazingHorsess
相关产品推荐
相关产品推荐

