通過另一個Widget改變一個Widget的狀態

我的主頁狀態：

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>();

并通過點擊更改...

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

但它不起作用！對我通過另一個地方更改此文本有什么幫助嗎？

uj5u.com熱心網友回復：

請參考以下示例代碼以使用 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
  }
}

標籤：扑 镖

上一篇：為什么這段代碼會導致hitbox例外？

下一篇：如何在flutter的文本欄位中將suffixIcon更改為自定義圖示