如何在 Flutter 上的 buttonColumn 中添加交互性？答案

【问题标题】：How do I add interactivity to a buttonColumn on Flutter?如何在 Flutter 上的 buttonColumn 中添加交互性？
【发布时间】：2018-09-19 01:50:33
【问题描述】：

所以在这个flutter教程中：https://flutter.io/tutorials/interactive/

他们展示了如何构建布局并为一个按钮（收藏按钮）添加交互性。

下面有一个 buttonSection，其中包含三个作为按钮的图标。我的问题是，如何为这些图标添加交互性？我已经尝试在 buttonColumn 中放入一个 FlatButton，如下所示在 Widget buttonSection 的容器的第一个孩子（带有 launch() => tel 的那个）：

Column buildButtonColumn(IconData icon, String label) {
  Color color = Colors.black;

  return Column(
    mainAxisSize: MainAxisSize.min,
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Icon(icon, color: color),
      Container(
        margin: const EdgeInsets.only(top: 8.0),
        child: Text(
          label,
          style: TextStyle(
            fontSize: 12.0,
            fontWeight: FontWeight.w400,
            color: color,
          ),
        ),
      ),
    ],
  );
}    

Widget buttonSection = Container(
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: [
      buildButtonColumn(FlatButton
        (onPressed: launch() => ("tel://09069262647"),),
      buildButtonColumn(Icons.near_me, 'ROUTE'),
      buildButtonColumn(Icons.fastfood, 'MENU'),
    ],
  ),
);

但是，它给了我一条错误消息“无法将参数 'FlatButton 分配给参数类型 'IconData'。我该怎么做？

【问题讨论】：

标签： android android-studio dart flutter

【解决方案1】：

如果您只需要一个小部件的水龙头，您可以用墨水瓶包裹它。 https://docs.flutter.io/flutter/material/InkWell-class.html

【讨论】：

【解决方案2】：

您可以使用GestureDetector widget 为任何小部件（如容器、列、行、图标等）添加交互性。

【讨论】：

嗨！谢谢回答。我只是想澄清一下 GestureDetector。我正在尝试使用该按钮让应用程序通过 URL Launcher 拨打号码。我用过： buildButtonColumn(GestureDetector(onTap: launch() => (tel://) ), Icons.call, 'CALL', 但无济于事。解决这个问题的方法是什么？
Launch() 函数下的代码将是：launch() async { const url = "tel:1234567"; if (await canLaunch(url)) { 等待启动(url); } else{ throw '无法启动 $url'; } }
嗨安莫尔。我写了这个，它仍然不起作用。首先，“await launch(url)”无效，因为 Flutter 说“位置参数太多：预期为 0，但找到了 1”。此外，当我在 buttonSection 小部件中调用 _launch() 时，它会说“方法 _launch() 没有为类 'MyApp' 定义”。再次感谢您的回复。我真的很感激。