Flutter技术问题：如何扩大GestureDetector的点击区域

我是Flutter新手，正在开发一个导航栏，效果如下：

点击图标时，导航栏会切换选中项并变更对应内容，但必须精准点击图标才能触发。我希望给图标设置可点击的“区域框”，允许点击图标附近区域，本质是把导航栏空间三等分。

我尝试了以下代码：

Widget build(BuildContext context) {
  return Container(
    height: 60,
    color: Color(0xff282424),
    child: Stack(
      children: [
        Container(
          child: Row(
            children: items.map((x) => createNavBarItem(x)).toList(),
          ),
        ),
        AnimatedContainer(
          duration: Duration(milliseconds: 200),
          alignment: Alignment(active.offset, 0.7),
          child: AnimatedContainer(
            duration: Duration(milliseconds: 400),
            height: 5,
            width: 50,
            decoration: BoxDecoration(
                color: active.color,
                borderRadius: BorderRadius.circular(2.5)),
          ),
        ),
      ],
    ),
  );
}


Widget createNavBarItem(MenuItem item) {
  double width = MediaQuery.of(context).size.width;
  return SizedBox(
    width: width / items.length,
    height: 55,
    child: GestureDetector(
      child: Icon(
        Icons.access_time,
        color: item.color,
        size: 30,
      ),
      onTap: () {
        setState(() {
          active = item;
          navBarUpdate(item);
        });
      },
    ),
  );
}

理论上每个项应该占据1/3宽度，但实际没生效。请问怎么扩大可点击区域？

编辑：附上完整代码 #

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  // This widget is the root of your application.\
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var screens = [Text("Button1"), Text("Button2"), Text("Button3")];
  int currentScreen = 0;

  void changeIndex(int index) => setState(() {
        currentScreen = index;
      });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.orange,
        child: Stack(
          children: [
            SafeArea(child: screens[currentScreen]),
            Container(
                alignment: Alignment.bottomCenter, child: NavBar(changeIndex))
          ],
        ),
      ),
    );
  }
}

class MenuItem {
  final String name;
  final Color color;
  final double offset;

  MenuItem(this.name, this.color, this.offset);
}

class NavBar extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => NavBarState(navBarUpdate);

  late Function(int) navBarUpdate;

  NavBar(this.navBarUpdate);
}

class NavBarState extends State<NavBar> {
  var items = [
    MenuItem("Test", Colors.red, -0.76),
    MenuItem("Test2", Colors.green, 0),
    MenuItem("Test3", Colors.yellow, 0.76)
  ];

  late MenuItem active;
  late Function(MenuItem) navBarUpdate;

  @override
  void initState() {
    super.initState();
    active = items[0];
  }

  NavBarState(Function(int) navBarUpdate) {
    this.navBarUpdate = (item) {
      navBarUpdate(items.indexOf(item));
    };
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 60,
      color: Color(0xff282424),
      child: Stack(
        children: [
          Container(
            child: Row(
              children: items.map((x) => createNavBarItem(x)).toList(),
            ),
          ),
          AnimatedContainer(
            duration: Duration(milliseconds: 200),
            alignment: Alignment(active.offset, 0.7),
            child: AnimatedContainer(
              duration: Duration(milliseconds: 400),
              height: 5,
              width: 50,
              decoration: BoxDecoration(
                  color: active.color,
                  borderRadius: BorderRadius.circular(2.5)),
            ),
          ),
        ],
      ),
    );
  }

  Widget createNavBarItem(MenuItem item) {
    double width = MediaQuery.of(context).size.width;
    return SizedBox(
      width: width / items.length,
      height: 55,
      child: GestureDetector(
        child: Icon(
          Icons.access_time,
          color: item.color,
          size: 30,
        ),
        onTap: () {
          setState(() {
            active = item;
            navBarUpdate(item);
          });
        },
      ),
    );
  }
}

你的问题核心是导航项的可点击区域没有铺满1/3屏幕宽度，可通过以下两种方式修复：

方式一：用Expanded自动平分宽度（推荐） #

把createNavBarItem里的SizedBox替换成Expanded，让每个导航项自动平分Row的宽度，同时给GestureDetector添加HitTestBehavior.opaque确保空白区域也能响应点击：

Widget createNavBarItem(MenuItem item) {
  return Expanded(
    child: SizedBox(
      height: 55,
      child: GestureDetector(
        behavior: HitTestBehavior.opaque,
        child: Icon(
          Icons.access_time,
          color: item.color,
          size: 30,
        ),
        onTap: () {
          setState(() {
            active = item;
            navBarUpdate(item);
          });
        },
      ),
    ),
  );
}

同时简化外层布局，去掉Row的多余嵌套：

@override
Widget build(BuildContext context) {
  return Container(
    height: 60,
    color: Color(0xff282424),
    child: Stack(
      children: [
        Row(
          children: items.map((x) => createNavBarItem(x)).toList(),
        ),
        AnimatedContainer(
          duration: Duration(milliseconds: 200),
          alignment: Alignment(active.offset, 0.7),
          child: AnimatedContainer(
            duration: Duration(milliseconds: 400),
            height: 5,
            width: 50,
            decoration: BoxDecoration(
                color: active.color,
                borderRadius: BorderRadius.circular(2.5)),
          ),
        ),
      ],
    ),
  );
}

方式二：优化SizedBox布局 #

如果坚持使用SizedBox，需要给图标添加居中布局，同时开启HitTestBehavior.opaque：

Widget createNavBarItem(MenuItem item) {
  double width = MediaQuery.of(context).size.width;
  return SizedBox(
    width: width / items.length,
    height: 55,
    child: GestureDetector(
      behavior: HitTestBehavior.opaque,
      child: Center(
        child: Icon(
          Icons.access_time,
          color: item.color,
          size: 30,
        ),
      ),
      onTap: () {
        setState(() {
          active = item;
          navBarUpdate(item);
        });
      },
    ),
  );
}

关键说明 #

• HitTestBehavior.opaque：让GestureDetector的空白区域也能接收点击事件，避免只有图标本身可点击。
• Expanded是更优雅的方案，无需手动计算屏幕宽度，适配各种设备尺寸的效果更好。

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