Flutter 如何实现Container内部图标初始隐藏、点击时显示的效果

实现步骤 #

• 首先在State类中新增一个布尔类型的状态变量，初始值设为false，用来控制_yes图标的显隐：

bool _showYesIcon = false;

• 修改Icon组件的渲染逻辑，用三元运算符做条件判断，初始状态下返回空的SizedBox隐藏图标，状态为true时才渲染_yes图标
• 在点击事件的setState逻辑中，新增状态变量的切换逻辑，每次点击就翻转显隐状态

修改后的完整代码 #

InkWell(
  onTap: () {
    setState(() {
      _ansContainer = _ansContainer == Colors.grey ? Colors.green : Colors.grey;
      _done = _done == Colors.transparent ? Colors.green : Colors.transparent;
      // 新增图标显隐切换逻辑
      _showYesIcon = !_showYesIcon;
    });
  },
  child: Container(
    margin: EdgeInsets.only(top: 10),
    padding: EdgeInsets.all(8.0),
    decoration: BoxDecoration(
      border: Border.all(color: _ansContainer),
      borderRadius: BorderRadius.circular(15),
    ),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text(
          'Answer 1', style: TextStyle(color: Colors.grey, fontSize: 16),
        ),
        Container(
          height: 26,
          width: 26,
          decoration: BoxDecoration(
            color: _done,
            borderRadius: BorderRadius.circular(50.0),
            border: Border.all(color: _ansContainer),
          ),
          // 修改这里的Icon渲染逻辑
          child: _showYesIcon ? Icon(_yes) : SizedBox.shrink(),
        ),
      ],
    ),
  ),
),

如果你不想额外新增状态变量，也可以直接复用已有的_done变量做判断：你原本的_done初始是透明色，选中才变为绿色，直接把Icon的渲染判断改成child: _done == Colors.green ? Icon(_yes) : SizedBox.shrink()就可以实现同样效果，不需要新增变量。

内容的提问来源于stack exchange，提问作者puthumai nathan