flutter - 当我按下按钮时，我无法使用 setState() 更改我的文本值

Question

当我按下按钮时，我希望我的 _sicaklikSeviyesi 变量的值更改并使用 setState() 将其更新到屏幕，但我不能。最近两天我一直在处理这个问题，我找不到歌曲的解决方案。你能帮我吗？

主屏幕代码：

import 'package:akilli_okul_sistemleri/alert_dialog.dart';
import 'package:akilli_okul_sistemleri/bottom_info_bar.dart';
import 'package:akilli_okul_sistemleri/drawer_panel.dart';
import 'package:flutter/material.dart';

class AnaMenu extends StatefulWidget {
  const AnaMenu({Key? key}) : super(key: key);

  @override
  State<AnaMenu> createState() => _AnaMenuState();
}

class _AnaMenuState extends State<AnaMenu> {
  BottomInfoBarState altPanel = BottomInfoBarState();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Akıllı Ev Sistemleri'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            altPanel.degisenDegerler();
            AlertBoxDialog.alertBoxCreator(
                context: context,
                title: "Başlık",
                desc: 'Açıklama',
                imageLocation: AlertBoxDialog.yuksekSicaklikLogo);
          },
          child: Text("ISI UYARISI"),
        ),
      ),
      drawer: DrawerPanel(),
      bottomNavigationBar: BottomInfoBar(),
    );
  }
}

底部信息条码：

import 'package:flutter/material.dart';
import 'package:akilli_okul_sistemleri/ana_menu.dart';

class BottomInfoBar extends StatefulWidget {
  BottomInfoBar({Key? key}) : super(key: key);

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

class BottomInfoBarState extends State<BottomInfoBar> {
  Color _logoRengi = Colors.white;
  int _sicaklikSeviyesi = 15,
      _sesSeviyesi = 15,
      _hareketSeviyesi = 45,
      _isikSeviyesi = 75,
      _dumanSeviyesi = 20;

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        boxShadow: [
          BoxShadow(color: Colors.black38, spreadRadius: 0, blurRadius: 10),
        ],
      ),
      child: ClipRRect(
        borderRadius: BorderRadius.only(
            topLeft: Radius.circular(15), topRight: Radius.circular(15)),
        child: BottomAppBar(
          color: Colors.orange[300],
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              _bottomContainerCreator(
                  Icons.local_fire_department, _sicaklikSeviyesi.toString()),
              _bottomContainerCreator(
                  Icons.record_voice_over, "%$_sesSeviyesi"),
              _bottomContainerCreator(
                  Icons.directions_walk, '%$_hareketSeviyesi'),
              _bottomContainerCreator(Icons.light, "%$_isikSeviyesi"),
              _bottomContainerCreator(Icons.cloud, "%$_dumanSeviyesi"),
            ],
          ),
        ),
      ),
    );
  }

  _bottomContainerCreator(IconData icon, String text) {
    return Container(
      decoration: BoxDecoration(
          color: Colors.grey[700], borderRadius: BorderRadius.circular(15.0)),
      margin: EdgeInsets.all(3),
      padding: EdgeInsets.all(3),
      height: 60,
      child: Column(
        children: [
          Container(
            padding: EdgeInsets.all(5),
            child: Icon(
              icon,
              size: 27,
              color: _logoRengi,
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(top: 1),
            child: Text(
              text,
              style:
                  TextStyle(fontWeight: FontWeight.bold, color: Colors.white),
            ),
          ),
        ],
      ),
    );
  }

  void degisenDegerler() {
    setState(() {
      _sicaklikSeviyesi = 100;
      if (_sicaklikSeviyesi < 20) {
        _logoRengi = Colors.blue;
      } else if (_sicaklikSeviyesi > 50) {
        _logoRengi = Colors.red;
      } else {
        _logoRengi = Colors.yellow;
      }
    });
  }
}

标签： flutter

Answer 1

您可以将 setState 向上移动小部件树（在 AnaMenu 小部件中）。所有依赖于值（在您的情况下为颜色）的小部件都将重建和更新。

试试下面的代码以获得一个简单的功能。如果您的底栏不需要其他逻辑。您可能希望将其转换为无状态小部件

class AnaMenu extends StatefulWidget {
  const AnaMenu({Key? key}) : super(key: key);

  @override
  State<AnaMenu> createState() => _AnaMenuState();
}

class _AnaMenuState extends State<AnaMenu> {
  late Color color;
  @override
  void initState() {
    color = Colors.blue;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Akıllı Ev Sistemleri'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            setState(() {
              color = Colors.green;
            });
            // AlertBoxDialog.alertBoxCreator(
            //     context: context,
            //     title: "Başlık",
            //     desc: 'Açıklama',
            //     imageLocation: AlertBoxDialog.yuksekSicaklikLogo);
          },
          child: Text("ISI UYARISI"),
        ),
      ),
      // drawer: DrawerPanel(),
      bottomNavigationBar: BottomInfoBar(color: color),
    );
  }
}

class BottomInfoBar extends StatefulWidget {
  final Color color;
  BottomInfoBar({required this.color, Key? key}) : super(key: key);

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

class BottomInfoBarState extends State<BottomInfoBar> {
  // Color _logoRengi = Colors.white;
  late int _sicaklikSeviyesi;
  late int _sesSeviyesi;
  late int _hareketSeviyesi;
  late int _isikSeviyesi;
  late int _dumanSeviyesi;

  @override
  void initState() {
    _sicaklikSeviyesi = 15;
    _sesSeviyesi = 15;
    _hareketSeviyesi = 45;
    _isikSeviyesi = 75;
    _dumanSeviyesi = 20;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        boxShadow: [
          BoxShadow(color: Colors.black38, spreadRadius: 0, blurRadius: 10),
        ],
      ),
      child: ClipRRect(
        borderRadius: BorderRadius.only(
            topLeft: Radius.circular(15), topRight: Radius.circular(15)),
        child: BottomAppBar(
          color: Colors.orange[300],
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              _bottomContainerCreator(
                  Icons.local_fire_department, _sicaklikSeviyesi.toString()),
              _bottomContainerCreator(
                  Icons.record_voice_over, "%$_sesSeviyesi"),
              _bottomContainerCreator(
                  Icons.directions_walk, '%$_hareketSeviyesi'),
              _bottomContainerCreator(Icons.light, "%$_isikSeviyesi"),
              _bottomContainerCreator(Icons.cloud, "%$_dumanSeviyesi"),
            ],
          ),
        ),
      ),
    );
  }

  _bottomContainerCreator(IconData icon, String text) {
    return Container(
      decoration: BoxDecoration(
          color: Colors.grey[700], borderRadius: BorderRadius.circular(15.0)),
      margin: EdgeInsets.all(3),
      padding: EdgeInsets.all(3),
      height: 60,
      child: Column(
        children: [
          Container(
            padding: EdgeInsets.all(5),
            child: Icon(
              icon,
              size: 27,
              color: widget.color,
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(top: 1),
            child: Text(
              text,
              style:
                  TextStyle(fontWeight: FontWeight.bold, color: Colors.white),
            ),
          ),
        ],
      ),
    );
  }
}