Flutter中如何通过点击其他组件实现组件的显示/隐藏？

要实现点击"Click me"文本切换上方Visibility组件的显示/隐藏，你需要通过状态管理控制visible参数，具体操作如下：

1. 添加状态变量 #

在页面的State类中，定义布尔变量控制Visibility的可见状态：

bool _isVisible = true;

2. 修改Visibility组件的visible参数 #

把_buildMyWidget里的固定值visible: true替换为状态变量：

_buildMyWidget() {
  return Visibility(
    visible: _isVisible, // 替换为状态变量
    child: Container(
      height: 100,
      child: ListView(
        scrollDirection: Axis.horizontal,
        children: <Widget>[
          Container(
            margin: const EdgeInsets.only(left: 20.0, right: 5.0),
            width: 120,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20),
            ),
          ),
        ],
      ),
    ),
  );
}

3. 给"Click me"文本添加点击事件 #

在_buildMyWidget2中，给包含"Click me"的TextSpan添加点击识别器，点击时切换状态并刷新UI：

_buildMyWidget2() {
  return Container(
    width: double.infinity,
    margin: EdgeInsets.all(20),
    padding: EdgeInsets.symmetric(
      horizontal: 20,
      vertical: 15,
    ),
    child: Text.rich(
      TextSpan(
        style: TextStyle(color: Colors.white),
        children: [
          TextSpan(text: "Pf"),
          TextSpan(
            text: "Click me",
            style: TextStyle(
              fontSize: 20,
            ),
            recognizer: TapGestureRecognizer()
              ..onTap = () {
                setState(() {
                  _isVisible = !_isVisible; // 切换可见状态
                });
              },
          ),
        ],
      ),
    ),
  );
}

关键注意点 #

• 页面必须是StatefulWidget，只有这类组件才能通过setState更新状态
• 需要导入手势识别包：import 'package:flutter/gestures.dart';

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