You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.25 19:02:49