因此，按钮的行为方式将使用户知道他/她单击了按钮[单击时按钮会短暂更改其前景色。]
现在，我的问题是，如何在容器上执行以下操作：当用户单击窗口小部件时，它变得响应[前景变暗]，以及当用户从窗口小部件上抬起手指[变为正常]？
我的小部件代码如下：
Container(
height: 60,
width: double.infinity,
margin: EdgeInsets.all(10.0),
child: Material(
borderRadius: BorderRadius.circular(10.0),
elevation: 1,
shadowColor: Colors.black,
child: Padding(
padding: EdgeInsets.only(left: 8),
child: Stack(
children: <Widget>[
Align(
alignment: Alignment.centerLeft,
child: Text(
'Click Me',
style: TextStyle(
fontFamily: 'Poppins',
fontSize: 14,
),
),
),
Align(
alignment: Alignment.centerRight,
child: Icon(
CupertinoIcons.right_chevron,
color: color_primary,
),
)
],
),
),
),
)
在“ Padding”小部件周围添加一个带有非null onTap参数的InkWell。
Container(
height: 60,
width: double.infinity,
margin: EdgeInsets.all(10.0),
child: Material(
borderRadius: BorderRadius.circular(10.0),
elevation: 1,
shadowColor: Colors.black,
child: InkWell(
borderRadius: BorderRadius.circular(10.0),
onTap: () {
// do something on tap
},
child: Padding(
padding: EdgeInsets.only(left: 8),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Expanded(
child: Text(
'Click Me',
style: TextStyle(
fontFamily: 'Poppins',
fontSize: 14,
),
),
),
SizedBox(width: 10.0),
Icon(
CupertinoIcons.right_chevron,
color: Theme.of(context).primaryColor,
),
],
),
),
),
),
),
另外，请查看一种无需使用堆栈即可达到相同结果的方法（因为这种情况可能会增加开销）。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句