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

Question

我有這個：同一頁面上有兩個小部件：

  _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),

              ),
            ),

          ],
        ),
      ),
    );
  }

所以，當我點擊下面的Text.rich “點擊我”按鈕時，我想要改變visible: true為visible: false 。 我怎樣才能做到這一點？

_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

嘗試這個：

首先定義：

 bool isVisibel = false;

然后：

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

isVisibel為假時的結果：

isVisibel為真時的結果：

Answer 2

假設這兩個小部件在同一個小部件/頁面內； 您可以定義 boolean 數據並將其分配給可見性。 點擊時，只需切換 boolean 數據

 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

只需創建一個變量並更改其值。

 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),

              ),
            ),

          ],
        ),
      ),
    );

並在用戶單擊 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,
                ),
              ),
            ],
          ),
        ),
    )
);