如何在按钮的 onTap 函数中构建另一个小部件

Question

编辑（第 2 次）： 我将状态从有状态小部件更改为无状态小部件，结果证明我可以解决问题。

编辑： 所以我犯了一个错误，我不应该在 onTap 函数中创建一个小部件，相反，我应该在某处实例化 CardMatcher，然后访问 CardMatcher，发送按钮的关键字，并让 CardMatcher 在单击按钮时为我检查关键字.

任何想法如何做到这一点？谁能帮我写一个简单的代码？

换句话说，我想制作一个可以检查是否有两个按钮被点击的小部件。该小部件应该在另一个文件中，以便可以重复使用。 ーーーー

所以我制作了一个自定义按钮，它将关键字传递给另一个检查关键字的小部件 (CardMatcher)。如果两个按钮具有相同的关键字，则小部件 (CardMatcher) 将对其进行处理。

按钮被点击时会传递关键字。可悲的是，什么也没有发生。没有检测到错误，但应用程序也没有构建 CardMatcher。这是按钮的代码：

import 'package:flutter/material.dart';
import 'package:fluttermatchcard/cardMatcher.dart';
import 'package:fluttermatchcard/cardMatcher.dart';
import 'package:fluttermatchcard/testerState.dart';

class CardButton extends StatefulWidget {

  final Widget child;
  //final GestureTapCallback onPressed;
  final double widthBut;
  final double heightBut;
  final Color colorInitial;
  final Color colorClicked ;
  final Color textColorInitial ;
  final Color textColorClicked ;
  final Alignment alignment;
  final Text text;
  final String keyword;

  CardButton({
    //@required this.onPressed,
    this.child,
    @required this.keyword,
    this.heightBut =40,
    this.widthBut = 75,
    this.colorClicked = Colors.white,
    this.colorInitial=Colors.amber,
    this.textColorClicked = Colors.amber,
    this.textColorInitial = Colors.white,
    this.alignment = Alignment.center,
    this.text = const Text(
                           "Card",
                              style: TextStyle(
                              fontSize: 20,
      ),
    ),

  });

  @override
  _CardButtonState createState() => _CardButtonState(
      keyword,
      widthBut,
      heightBut,
      colorClicked,
      colorInitial,
      textColorClicked,
      textColorInitial,
      alignment,
      text,
  );
}

class _CardButtonState extends State<CardButton> {

  String _keyword;
  double _widthBut ;
  double _heightBut;
  Color _colorInitial;
  Color _colorClicked ;
  Color _textColorInitial;
  Color _textColorClicked ;
  Alignment _alignment ;
  Text _text;

  _CardButtonState(
      this._keyword,
      this._widthBut,
      this._heightBut,
      this._colorClicked,
      this._colorInitial,
      this._textColorClicked,
      this._textColorInitial,
      this._alignment,
      this._text,
      );

  Color _colorNow;
  Color _textColorNow;

  bool isClicked = false;

  void initState() {
    _colorNow=_colorInitial;
    _text = Text(_text.data, style: TextStyle(color: _textColorInitial, fontSize: _text.style.fontSize),);
    super.initState();
  }

  void ChangeButton(){

    setState(() {
      isClicked= !isClicked;
      if(isClicked){
        _colorNow=_colorClicked;
        _text = Text(_text.data, style: TextStyle(color: _textColorClicked, fontSize: _text.style.fontSize),);
      }
      else{
        _colorNow=_colorInitial;
        _text = Text(_text.data, style: TextStyle(color: _textColorInitial, fontSize: _text.style.fontSize),);
      }
    });

    //super.initState();//no idea

  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: _widthBut,
      height: _heightBut,
      child: InkWell(
        onTap: (){ChangeButton();
        CardMatcher(_keyword);
        print("onTap");},
        child: Container(
          padding: EdgeInsets.all(3),
          alignment: _alignment,
          decoration: BoxDecoration(
              color: _colorNow,
              boxShadow: [
                BoxShadow(
                    color: Colors.black12,
                    blurRadius: 5,
                    offset: Offset(0,2),
                    spreadRadius: 2
                )
              ],
              border: Border.all(
                  color: Colors.amberAccent
              )
          ),
          child: _text,
        ),
      ),
    );
    //widget.onPressed();
  }
}

对于 CardMatcher：

import 'package:flutter/material.dart';

class CardMatcher extends StatefulWidget {
  final String keyword_now;
  CardMatcher(this.keyword_now);

  @override
  _CardMatcherState createState() {
    print("cardMatch");

    _CardMatcherState(keyword_now);
  }
}

class _CardMatcherState extends State<CardMatcher> {
  String _keyword_1;
  String _keyword_2;
  String _keyword_now;

  _CardMatcherState(
      this._keyword_now,
      );

  void _collectKeywords(){
    print("EnterCollect");

    setState(() {
      if(_keyword_1==null)
        {
          print("key1");
          _keyword_1=_keyword_now;
        }
      else{
        _keyword_2=_keyword_now;
        _matchKeyword(_keyword_1,_keyword_2);
      }
    });
  }

  void _matchKeyword(_keyWord_one, _keyWord_two){
    if(_keyWord_one==_keyWord_two){
      //Lock the But
      print("MATCH!!!!");
    }
  }

  @override
  Widget build(BuildContext context) {
    print("BUILD");
    _collectKeywords();
    return null;
  }
}

请救救我

Answer 1

您尝试在 onTap 函数中创建 CardMatcher 小部件！
你需要做什么：
1. onTap 必须只调用ChangeButton（但不要在此处创建CardMatcher）
2.ChangeButton必须调用setState()AND更改_keyword字段
3. 在构建树中使用CardMatcher 实例，_keyword 作为构造函数参数

当调用setState 时，您指示颤振重建（即调用build()）小部件。如果您更改了一个状态（即_keyword），那么build 方法将使用新状态的值来构建相应的小部件

Answer 2

您的代码中似乎唯一缺少的是使用widget. 前缀来访问Stateful 小部件构造函数变量，如下所示：

class CardMatcher extends StatefulWidget {
  final String keyword_now;
  CardMatcher(this.keyword_now);

  @override
  _CardMatcherState createState() {
    print("cardMatch");

    _CardMatcherState(keyword_now);
  }
}

class _CardMatcherState extends State<CardMatcher> {
  String _keyword_1;
  String _keyword_2;


  void _collectKeywords(){
    print("EnterCollect");

    setState(() {
      if(_keyword_1 == null)
        {
          print("key1");
          _keyword_1 = widget.keyword_now;
        }
      else{
        _keyword_2 = widget.keyword_now;
        _matchKeyword(_keyword_1,_keyword_2);
      }
    });
  }

  void _matchKeyword(_keyWord_one, _keyWord_two){
    if(_keyWord_one==_keyWord_two){
      //Lock the But
      print("MATCH!!!!");
    }
  }

  @override
  Widget build(BuildContext context) {
    print("BUILD");
    _collectKeywords();
    return null;
  }
}