如何在按钮的onTap函数中构建另一个小部件
如何在按钮的onTap函数中构建另一个小部件
提问于 2020-03-12 00:21:19
编辑(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;
}
}请救救我
回答 2
Stack Overflow用户
发布于 2020-03-12 00:54:55
您尝试在onTap函数中创建CardMatcher小部件！
你需要做的是：
onTap必须只创建并调用ChangeButton(但不要创建CardMatcher) here)ChangeButton必须调用setState()和更改_keyword字段- 在构建树中使用
_keyword实例作为构造函数参数
G221
当调用setState时，您指示flutter重新构建(即调用build())小部件。如果更改状态(即_keyword)，则build方法将使用新状态的值来相应地构建小部件
Stack Overflow用户
发布于 2020-03-12 00:55:25
您的代码中似乎唯一缺少的是使用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;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60640438
复制相关文章
相似问题
腾讯云开发者
