flutter - 通过另一个 Widget 更改一个 Widget 的状态

Question

我的主页状态:

Widget build(BuildContext context) {
        double screenWidth = MediaQuery.of(context).size.width;
        return Scaffold(
            backgroundColor: bgColor,
            body: ListView(
              children: <Widget>[
                Stack(
                  alignment: Alignment.topCenter,
    
                  children: <Widget>[
                    mainWidget(),
    
                  ],
                ),
                connectedStatusText(),
              ],
            ));
      }

我正在尝试从 mainWidget() 更改connectedStatusText() 的状态!

我的连接状态:

class connectedStatusText extends StatefulWidget
{
  State<connectedStatusText> createState() {
    return connectedStatus();
  }
}

class connectedStatus extends State<connectedStatusText> {
  String status = "IDLE";
  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment.center,
          child: RichText(
            textAlign: TextAlign.center,
            text: TextSpan(text: 'Status:', style: connectedStyle, children: [
              TextSpan(text: status, style: disconnectedRed)
            ]),
          ),
    );
  }

}

我想通过 mainWidget() 的 ontap 将 $status 文本更改为“已连接”。

主部件:

....
class mainWidget extends StatefulWidget
{
  MyED createState() => new MyED();
}


class MyED extends State<mainWidget> {
 child: new GestureDetector(
          onTap: () => setState(() {
                          //change here
                      }

尝试将全局变量设置为connectedStatus:

GlobalKey<connectedStatus> key = GlobalKey<connectedStatus>();

并通过ontap进行更改...

 child: new GestureDetector(
          onTap: () => setState(() {
                          //change here
                           key.currentState.status = "CONNECTED";
                      }
          )
}

但是它不起作用! 有什么帮助我可以通过其他地方更改此文本吗？

Answer 1

请引用下面的示例代码来使用 ValueNotifier 和 ValueListenableBuilder 更新状态。

ValueNotifer 和 ValueListenableBuilder 可用于通过通知其监听器并减少小部件树重建次数来保存值和更新小部件。

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Screen2(),
    );
  }
}

class Screen2 extends StatefulWidget {
  final String userId; // receives the value

  const Screen2({Key key, this.userId}) : super(key: key);

  @override
  _Screen2State createState() => _Screen2State();
}

class _Screen2State extends State<Screen2> {
  final ValueNotifier<bool> updateStatus = ValueNotifier(false);
  @override
  Widget build(BuildContext context) {
    double screenWidth = MediaQuery.of(context).size.width;
    return Scaffold(
      backgroundColor: Colors.blue,
      body: ListView(
        children: <Widget>[
          Stack(
            alignment: Alignment.topCenter,
            children: <Widget>[
              mainWidget(
                updateStatus: updateStatus,
              ),
            ],
          ),
          connectedStatusText(
            updateStatus: updateStatus,
          ),
        ],
      ),
    ); // uses the value
  }
}

class connectedStatusText extends StatefulWidget {
  final ValueNotifier<bool> updateStatus;

  connectedStatusText({
    Key key,
    this.updateStatus,
  }) : super(key: key);

  State<connectedStatusText> createState() {
    return connectedStatus();
  }
}

class connectedStatus extends State<connectedStatusText> {
  String status = "IDLE";

  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment.center,
      child: /* 
              In order update widget we can use ValueListenableBuilder which updates the particular widget when the value changes (ValueNotifier value)
            */
          ValueListenableBuilder(
              valueListenable: widget.updateStatus,
              builder: (context, snapshot, child) {
                return RichText(
                  textAlign: TextAlign.center,
                  text: TextSpan(text: 'Status:', children: [
                    TextSpan(
                      text: (widget.updateStatus.value == true)
                          ? "Active"
                          : status,
                    )
                  ]),
                );
              }),
    );
  }
}

class mainWidget extends StatefulWidget {
  final String userId; // receives the value
  final ValueNotifier<bool> updateStatus;

  mainWidget({
    Key key,
    this.userId,
    this.updateStatus,
  }) : super(key: key);

  @override
  _mainWidgetState createState() => _mainWidgetState();
}

class _mainWidgetState extends State<mainWidget> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
        onTap: () {
          widget.updateStatus.value = !widget.updateStatus.value;
        },
        child: ValueListenableBuilder(
            valueListenable: widget.updateStatus,
            builder: (context, snapshot, child) {
              return Text(snapshot.toString());
            }));

    // uses the value
  }
}