Flutter show/hide 小部件

Question

我正在尝试在已完成的倒计时计时器上显示一个小部件，但我似乎无法让它工作。我添加了 var reqPIN = false;

这是我的代码：

        children [
         Countdown(
            seconds: 3,
            build: (_, double time) =>
                RichText(
                  text: TextSpan(
                    text: 'Reset PIN in ',
                    style: TextStyle(
                      color: Theme.of(context).inputDecorationTheme.labelStyle?.color
                    ),
                    children: <TextSpan>[
                      TextSpan(
                        text: time.toString(),
                      style: TextStyle(
                        color: Color(0xFF2481CF),
                        fontWeight: FontWeight.bold
                      )),
                      TextSpan(text: ' sec',
                      style: TextStyle(
                        color: Theme.of(context).inputDecorationTheme.labelStyle?.color
                      ))
                    ]
                  ),
                ),
            onFinished: () {
              setState(() {
                reqPIN = true;
              });
            },
          ),
          SizedBox(
            child: Visibility(
              visible: reqPIN,
              child: Text('Resend PIN',
              style: TextStyle(
                color: Colors.black
              ),),
            ),
          )
        ]

有什么解决办法吗？

Answer 1

试试这个。

if (reqPIN)
   SizedBox(
     child: Text('Resend PIN', style: TextStyle(color: Colors.black)),
    ),

Answer 2

onlySelectedBorderPinPut() 未在 setState...

上被调用

要解决这个问题，您可以用一个列包裹您的 RichText，并在其中添加您的重新发送按钮，您不需要 reqPin bool 来管理状态，只需像下面这样用剩余时间处理它

Countdown(
  seconds: 3,
  build: (_, double time) => Column(
    children: [
       RichText(
       ...
       ),
       Visibility(
          visible: time == 0,
          child: SizedBox(
                   child: Text('Resend PIN',
                   style: TextStyle(color: Colors.black
                 )
              ),
           ),
         ),
      ],
   ),
),

Flutter show/hide 小部件

Flutter show/hide widget

flutter

flutter-layout