Flutter中点击MainSearchTextFormField无法跳转至SearchOnScreen求助

点击SearchOffScreen页面内的MainSearchTextFormField组件时，无法跳转到SearchOnScreen页面。先后尝试用InkWell和GestureDetector绑定点击事件，均未生效。

初始尝试代码 #

class SearchOffScreen extends StatelessWidget {
  const SearchOffScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return DefaultLayout(
      child: SafeArea(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16.0),
            child: Column(
                children: [
                  const SizedBox(height: 200.0,),
                  InkWell(
                    child: IgnorePointer(
                      child: MainSearchTextFormField(),
                    ),
                    onTap: () {
                      print("call");
                    },
                  ),
                ]
            )
        ),
      ),
    );
  }
}

修改后的代码 #

SearchOnScreen页面 #

// this is search_on_screen
class SearchOnScreen extends StatelessWidget {
  const SearchOnScreen ({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return DefaultLayout(
      child: SafeArea(
        top: true,
        bottom: false,
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 0.0),
          child: Column(
            children: [
              CupertinoSearchTextField(
                suffixInsets: EdgeInsets.only(right: 16),
                prefixInsets: EdgeInsets.only(left: 16), // 修正原代码拼写错误
                padding: EdgeInsets.only(left: 15,top: 15, bottom: 15),
                decoration: BoxDecoration(
                  border: Border(bottom: BorderSide(width: 0.5, color: Color(0xff868686)))
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

SearchOffScreen页面 #

// This is search_off_screen
class SearchOffScreen extends StatelessWidget {
  const SearchOffScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return DefaultLayout(
      child: SafeArea(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16.0),
          child: GestureDetector(
            onTap: (){
              Navigator.of(context).push(
                MaterialPageRoute(
                    builder: (BuildContext context){
                      return SearchOnScreen();
                    }
                ),
              );
            },
            child: Container(
              child: Column(
                children: [
                  const SizedBox(height: 200.0,),
                  IgnorePointer(
                    child: MainSearchTextFormField(),
                  )
                ], //children
              ),
            ),
          )
        ),
      ),
    );
  }
}

主入口代码 #

// This is dart.main
void main() {
  runApp(
    _App(),
  );
}

class _App extends StatelessWidget {
  const _App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        fontFamily: 'NotoSans',
      ),
      debugShowCheckedModeBanner: false,
      home: SearchOffScreen(),
    );
  }
}

问题原因及解决办法 #

1. 布局层级问题：修改后的GestureDetector包裹了包含空白区域的Column，点击SizedBox空白区会触发跳转，但MainSearchTextFormField的点击事件可能因层级或约束未被正确捕获。
2. 调整点击事件绑定范围：将GestureDetector直接包裹在MainSearchTextFormField外层，确保点击输入框区域时事件能被精准触发，同时保留IgnorePointer避免输入框自身响应点击。

修正后的SearchOffScreen代码：

class SearchOffScreen extends StatelessWidget {
  const SearchOffScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return DefaultLayout(
      child: SafeArea(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16.0),
          child: Column(
            children: [
              const SizedBox(height: 200.0),
              GestureDetector(
                onTap: () {
                  Navigator.of(context).push(
                    MaterialPageRoute(
                      builder: (context) => SearchOnScreen(),
                    ),
                  );
                },
                child: IgnorePointer(
                  child: MainSearchTextFormField(),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

3. 额外检查项：确认MainSearchTextFormField内部没有自定义的点击拦截逻辑，且组件尺寸可见、未被其他组件遮挡。

内容的提问来源于stack exchange，提问作者Wowmoment