如何使具有图标和文本的行可点击？

Question

我有 2 个相关问题：

我有嵌套函数 BuildButtonColumn 需要一个图标和它下面的文字，我想让它可以点击。我知道 GestureDetector 有 onTap 属性，但我如何在函数 BuildButtonColumn ?

Column buildButtonColumn(IconData icon, String label) {
  Color color = Theme
      .of(context)
      .primaryColor;

  return Column(
    mainAxisSize: MainAxisSize.min,
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Padding(
        padding: EdgeInsets.all(10.0),
      ),
      Icon(icon, color: color),
      Container(
        margin: const EdgeInsets.only(top: 8.0),
        child: Text(
            label,
            style: TextStyle(
              fontSize: 14.0,
              fontWeight: FontWeight.bold,
              color: Colors.black,
            )
        ),
      )
    ],
  );
}
Widget buttonSection = Container(
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: <Widget>[
      buildButtonColumn(Icons.message, 'Message'),
      buildButtonColumn(Icons.videocam, 'Request Video')
    ],
  ),
);

我从 here 中获取了按钮布局参考。

这就是 UI，我需要在点击每个图标或文本时打开特定屏幕。

我还想在它们之间显示一个垂直分隔线。我跟着所以 post，但它对我没有用，或者我可能有错过了一些实现它的东西。

Answer 1

相反 return Column 你可以这样写：

return GestureDetector(
    onTap: (){ ... },
    child: Column(),
)

关于分隔符 - VerticalDivider() 对我来说完全没问题

Widget buttonSection = Container(
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: <Widget>[
      buildButtonColumn(Icons.message, 'Message'),
      VerticalDivider(color: Colors.black,),
      buildButtonColumn(Icons.videocam, 'Request Video')
    ],
  ),
);

它必须工作

如何使具有图标和文本的行可点击？

How to make a row having icon and text tappable?

flutter

flutter-layout