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

【问题标题】：How to make a row having icon and text tappable?如何使具有图标和文本可点击的行？
【发布时间】：2019-03-23 05:00:59
【问题描述】：

我有 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。

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

【问题讨论】：

标签： flutter flutter-layout

【解决方案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')
    ],
  ),
);

它必须工作

【讨论】：

如果我尝试return GestureDetector，它会给我一个错误return type GestureDetector isn't a column, as defined by BuildButtonColumn。另外，分别点击Message 和Video 后，我需要打开2 个不同的屏幕，我该如何实现呢？同样对于分隔符，我是否必须导入任何具有 VerticalDivider() 方法的包？或者我需要为它创建一个方法？那是什么？对不起，但给定的解决方案我不清楚。如果您能详细说明两者，那就太好了。 @安德烈
当您尝试 GestureDetector 时 - 您是否将 Column buildButtonColumn 更改为 GestureDetector buildButtonColumn 或更好的 Widget buildButtonColumn？
是的@Andrey，我第一次尝试使用GestureDetector，但决定使用更通用的Widget，我感到困惑的原因是因为我想为两个按钮设置两个不同的tap现在已经解决了。关于VerticalDivider()，这是内置方法吗？因为我试图实现它，但还没有成功。
那么，您解决了问题，GestureDetector 和 VerticalDivider 工作正常？
是的，关于VerticalDivider()，这对我有用：Widget build(BuildContext context) { return new Container( height: 30.0, width: 1.0, color: Colors.white30, margin: const EdgeInsets.只有（左：10.0，右：10.0），）； } 然后根据你的建议给班级打电话。