如何在 Flutter 的其他小部件上隐藏/显示小部件 onclick？

Question

I have this: two widgets on the same page:

  _buildMyWidget() {
    return Visibility(
      visible: true,
      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),

              ),
            ),

          ],
        ),
      ),
    );
  }

So, what I want is to change the visible: true to visible: false when I click on the Text.rich "Click me" button here below. How can I achieve this?

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

Answer 1

try this:

first define:

 bool isVisibel = false;

then:

Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Visibility(
            visible: isVisibel,
            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),
                    ),
                  ),
                ],
              ),
            ),
          ),
          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(() {
                            isVisibel = !isVisibel;
                          });
                        }),
                ],
              ),
            ),
          ),
        ],
      )

result when isVisibel is false:

result when isVisibel is true:

Answer 2

Assuming those two widgets are inside the same widget/page; you could define a boolean data and assign it to visibility. On tap, just toggle the boolean data

 bool show = true; TextSpan( text: ' Click here', style: TextStyle(color: Colors.blue[300]), recognizer: LongPressGestureRecognizer()..onTap = () { setState({ show =;show; }), }, ): Visibility( visible, show: 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), ), ), ], ), ); ); }

Answer 3

Just create a variable and change its value.

 bool visi = true;
    

return Visibility(
      visible: visi,
      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),

              ),
            ),

          ],
        ),
      ),
    );

And change its value when user click on RichText.

return GestureDetector(
onTap:(){
visi = !visi;
setState(){}
}
child: 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,
                ),
              ),
            ],
          ),
        ),
    )
);