主页 / 问题 / 1434417
Accepted
bahmN
Asked:2022-07-30 07:07:50 +0000 UTC2022-07-30 07:07:50 +0000 UTC

单击按钮时文本未更新

  • 772

有 2 个小部件：MyHomePage和Buttons。列表中的MyHomePage信息应该显示在哪里，而 Buttons 只是作为一个单独的“自定义小部件”。当我单击按钮时，我必须更改 id 以确定 List 中的哪个项目应显示在MyHomePage中。

class _ButtonsState extends State<Buttons> {
  var s = Logic();
  void _func(int id) {
    setState(() {
      s.id = id;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        MaterialButton(
          onPressed: () => _func(1),
          child: Text('Text 1'),
        ),
        MaterialButton(
          onPressed: () => _func(2),
          child: Text('Text 2'),
        ),
      ],
    );
  }
}

但是当你点击按钮时，信息并没有更新，虽然MyHomePage有StreamBuilder

class _MyHomePageState extends State<MyHomePage> {
  var s = Logic();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            StreamBuilder<String>(
              stream: s.stream(),
              builder: (context, snapshot) {
                if (snapshot.data != null && snapshot.hasData) {
                  return Text(
                    '${snapshot.data}',
                    style: Theme.of(context).textTheme.headline4,
                  );
                } else {
                  return Container(
                    width: 100,
                    height: 100,
                    color: Colors.red,
                  );
                }
              },
            ),
            Buttons(),
          ],
        ),
      ),
    );
  }
}

这是Stream我订阅的代码StreamBuilder

class Logic {
  int? id;
  var text = ListStrings();
  Stream<String>? stream() {
    if (id == 1) {
      return Stream.value(text.text[0]);
    } else if (id == 2) {
      return Stream.value(text.text[1]);
    } else {
      return null;
    }
  }
}

单击按钮时id，类中的自身会更新。Logic错误是什么？

flutter dart

1 个回答

  1. Best Answer
    1. 在您的示例中，Logic.stream它返回一个具有单个值的流，该值不能以任何方式更新。也就是说，它等价于以下内容：
    class Logic {
  int? id;
  var text = ListStrings();
  String? getText() {
    if (id == 1) {
      return text.text[0];
    } else if (id == 2) {
      return text.text[1];
    } else {
      return null;
    }
  }
}

class _MyHomePageState extends State<MyHomePage> {
  var s = Logic();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              ${s.getText()}',
              style: Theme.of(context).textTheme.headline4,
            ),
            Buttons(),
          ],
        ),
      ),
    );
  }
}
    1. var sin_ButtonsState和var sin是两个不同的对象这一事实_MyHomePageState将不再允许我们实现正确的逻辑。

    我可以建议以下方法来解决问题：

    class MyHomePage extends StatefulWidget {
  MyHomePage({required this.title});

  final String title;

  @override
  State<StatefulWidget> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // Объявляем s только в одном месте
  final s = Logic();

  @override
  void dispose() {
    // Закрываем контроллер
    s.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            StreamBuilder<String?>(
              stream: s.textStream,
              builder: (context, snapshot) {
                if (snapshot.data != null && snapshot.hasData) {
                  return Text(
                    '${snapshot.data}',
                    style: Theme.of(context).textTheme.headline4,
                  );
                } else {
                  return Container(
                    width: 100,
                    height: 100,
                    color: Colors.red,
                  );
                }
              },
            ),
            Buttons(s: s),
          ],
        ),
      ),
    );
  }
}

class Buttons extends StatefulWidget {
  Buttons({required this.s});

  final Logic s;

  @override
  State<StatefulWidget> createState() => _ButtonsState();
}

class _ButtonsState extends State<Buttons> {
  void _func(int id) {
    // Теперь при задании id, новое значение будет приходить в _idController
    widget.s.id = id;
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        MaterialButton(
          onPressed: () => _func(1),
          child: Text('Text 1'),
        ),
        MaterialButton(
          onPressed: () => _func(2),
          child: Text('Text 2'),
        ),
      ],
    );
  }
}

class Logic {
  final text = ListStrings();

  int? _id;

  int? get id => _id;

  set id(int? newValue) {
    _id = newValue;
    _idController.add(newValue);
  }

  final _idController = StreamController<int?>();

  Stream<String?> get textStream {
    // Трансформируем стрим для того, чтобы получать не id, а значение из списка text.text
    return _idController.stream.map<String?>(
      (id) {
        if (id == null) return null;
        final textIndex = id - 1;
        // Если индекс не входит в границы списка, возвращаем null
        if (textIndex < 0 || textIndex >= text.text.length) return null;
        return text.text[textIndex];
      },
    );
  }

  void dispose() {
    _idController.close();
  }
}
    • 1

相关问题