Как создать другой виджет внутри функции onTap кнопки - PullRequest
Новая
       10

Как создать другой виджет внутри функции onTap кнопки

0 голосов
/ 11 марта 2020

EDIT (2nd): я изменил состояние с виджетов с сохранением состояния на виджет без состояния, и, оказывается, я могу решить эту проблему.

РЕДАКТИРОВАТЬ: Итак, я сделал ошибку, я не должен был делать виджет внутри функции onTap. Вместо этого я должен был где-то создать экземпляр CardMatcher, а затем получить доступ к CardMatcher, отправить ключевое слово кнопки и позволить CardMatcher проверить Ключевое слово для меня, когда кнопка нажата.

Есть идеи, как это сделать? Может ли кто-нибудь сделать для меня простой код?

Другими словами, я хочу создать виджет, который может проверять, были ли нажаты две кнопки. Этот виджет должен быть в другом файле, чтобы его можно было использовать повторно. 100 ー ー ー

Поэтому я создал пользовательскую кнопку, которая будет передавать ключевое слово другому виджету (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;
  }
}

Спасите меня, пожалуйста

Ответы [ 2 ]

0 голосов
/ 11 марта 2020

Единственное, что, по-видимому, отсутствует в вашем коде - это использование префикса 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;
  }
}
0 голосов
/ 11 марта 2020

Вы пытаетесь создать виджет CardMatcher в своей функции onTap!
Что вам нужно сделать:
1. onTap must just call ChangeButton (но не создавайте CardMatcher здесь)
2. ChangeButton должен вызвать setState() И изменить _keyword поле
3. Использовать экземпляр CardMatcher в вашем дереве сборки с _keyword в качестве параметра конструктора

При вызове setState вы указываете, что нужно трепетать, чтобы перестроить (т.е. вызвать build()) виджет. Если вы измените состояние (то есть _keyword), то метод build будет использовать значение нового состояния для создания виджета, соответствующего

...