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

Question

我有 2 个相关问题:

1. 我有嵌套函数 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。

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

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')
    ],
  ),
);

它必须工作