Question

我认为我遇到了一个小问题。

我想显示一个小部件并将其隐藏，这取决于另一个类的值，这是一个小代码，可以解释我的意思。

我使用Visibility隐藏和显示Hello world消息。

Visibility(
   visible: showAlert().getAlertVisible(),
   child: Text(
           "Hello World"
        ),
    )

showAlert().getAlertVisible()我是从另一个班级得到的，它将是对还是错。

这是Class

class showAlert{

  bool alertVisible = false;

  void setAlertVisible(bool value){
    alertVisible = value;
  }

  bool getAlertVisible(){
    return alertVisible;
  }

  void show(Duration duration){

    setAlertVisible(false);
    setAlertVisible(true);

    Future.delayed(
        duration,
            (){
          setAlertVisible(false);
        }
    );
  }
}

我的问题：当class showAlert中的值更改时，接口没有任何变化，因为我不使用setState()，而值时如何使用setState()改变还是现场聆听？

Answer 1

使用ValueNotifier和AnimatedBuilder：

class ShowAlert{
  ValueNotifier<bool> alertVisible = ValueNotifier(false);

  void show(Duration duration){
    alertVisible.value = true;
    Future.delayed(duration, ()=> alertVisible.value = false);
  }
}

void main() {
  final showAlert = ShowAlert();
  showAlert.show(Duration(seconds: 5));
  runApp(
    MaterialApp(
      home: Scaffold(
        body: AnimatedBuilder(
          animation: showAlert.alertVisible,
          builder: (context, _) {
            return Visibility(
              visible: showAlert.alertVisible.value,
              child: Text("Hello World"),
            );
          },
        ),
      ),
    ),
  );
}

ValueNotifier的值更改时，AnimatedBuilder将重建其子代。

Answer 2

扩展ChangeNotifier：

class ShowAlert extends ChangeNotifier{
  bool alertVisible = false;

  void show(Duration duration) {
    alertVisible = true;
    notifyListeners();

    Future.delayed(duration, () {
      alertVisible = false;
      notifyListeners();
    });
  }
}

void main() {
  final showAlert = ShowAlert();
  showAlert.show(Duration(seconds: 5));
  runApp(
    MaterialApp(
      home: Scaffold(
        body: AnimatedBuilder(
          animation: showAlert,
          builder: (context, _) {
            return Visibility(
              visible: showAlert.alertVisible,
              child: Text("Hello World"),
            );
          },
        ),
      ),
    ),
  );
}

ChangeNotifier类实现了Listenable接口。

Answer 3

使用mixin：

mixin ShowAlert<T extends StatefulWidget> on State<T> {
  bool alertVisible = false;

  void show(Duration duration) {
    setState(() {
      alertVisible = true;
    });
    Future.delayed(duration, () {
      setState(() {
        alertVisible = false;
      });
    });
  }
}

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: MyApp(),
      ),
    ),
  );
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with ShowAlert<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        FlatButton(
          onPressed: () {
            show(Duration(seconds: 5));
          },
          child: Text('show'),
        ),
        Visibility(
          visible: alertVisible,
          child: Text("Hello World"),
        ),
      ],
    );
  }
}

setState依赖于另一个类的值

3 个答案: