改变值 onTap
change value onTap
我有 2 个 Inkwell 是 pageView 的控制器，当我按下其中一个时会切换到相应的页面。
Padding(
padding:
const EdgeInsetsDirectional.fromSTEB(0, 12, 1, 0),
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
mainAxisSize: MainAxisSize.max,
children: [
Padding(
padding: const EdgeInsetsDirectional.fromSTEB(
16, 0, 0, 0),
child: InkWell(
onTap: () async {
isSecondButton = false;
isFirstButton = true;
setState(() {});
await pageViewController.animateToPage(
0,
duration: const Duration(milliseconds: 500),
curve: Curves.ease,
);
},
child: Material(
color: Colors.transparent,
elevation: 2,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
child: Container(
width: 100,
height: 100,
decoration: BoxDecoration(
color: const Color(0xFF0D1821),
borderRadius: BorderRadius.circular(8),
shape: BoxShape.rectangle,
border: isFirstButton
? Border.all(color: Colors.white)
: null),
child: Stack(
children: [
Align(
alignment: const AlignmentDirectional(
0, -0.05),
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment:
MainAxisAlignment.center,
children: [
Image.asset(
'assets/images/memes/standardbuild.jpg',
width: 50,
height: 50,
fit: BoxFit.cover,
),
Padding(
padding: EdgeInsetsDirectional
.fromSTEB(0, 8, 0, 0),
child: AutoSizeText(
'STANDARD BUILD',
textAlign: TextAlign.center,
style: GoogleFonts.lexendDeca(
color: Color(0xFF8B97A2),
fontSize: 13,
fontWeight:
FontWeight.normal,
),
),
),
],
),
),
],
),
),
),
),
),
Padding(
padding: const EdgeInsetsDirectional.fromSTEB(
16, 0, 0, 0),
child: Material(
color: Colors.transparent,
elevation: 2,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
child: Container(
width: 100,
height: 100,
decoration: BoxDecoration(
color: const Color(0xFF0D1821),
borderRadius: BorderRadius.circular(8),
border: isSecondButton
? Border.all(color: Colors.white)
: null),
child: InkWell(
onTap: () async {
isSecondButton = true;
isFirstButton = false;
setState(() {});
await pageViewController.animateToPage(
1,
duration:
const Duration(milliseconds: 500),
curve: Curves.ease,
);
},
child: Stack(
children: [
Align(
alignment: const AlignmentDirectional(
0, -0.05),
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment:
MainAxisAlignment.center,
children: [
Image.asset(
'assets/images/memes/pepechad.png',
width: 50,
height: 50,
fit: BoxFit.cover,
),
Padding(
padding: EdgeInsetsDirectional
.fromSTEB(0, 8, 0, 0),
child: AutoSizeText(
'ALTERNATIVE BUILD',
textAlign: TextAlign.center,
style: GoogleFonts.lexendDeca(
color: Color(0xFF8B97A2),
fontSize: 13,
fontWeight:
FontWeight.normal,
),
),
),
],
),
),
],
),
),
),
),
),
],
),
),
),
最重要的是，我想补充一点，在同一个 onTap 上更改小部件的另一个值，下面是一个简单的字符串，存储在模型数据中，并通过 [=14] 调用=]<-- 第一个值和 widget.data.tier2 <-- 第二个值：
Padding(
padding:
const EdgeInsetsDirectional.fromSTEB(0, 0, 0, 15),
child: AutoSizeText(
' lane',
style: GoogleFonts.lexendDeca(
color: Color(0xFF8B97A2),
),
),
),
Container(
width: MediaQuery.of(context).size.width,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: [
AutoSizeText(
widget.data.tier,
style: GoogleFonts.lexendDeca(
color: Color(0xFFFFFFFF),
fontSize: 45,
fontWeight: FontWeight.normal,
),
),
例如：
onTap
第一个按钮 --> 相应的综合浏览页面 + widget.data.tier1
第二个按钮 --> 相应的浏览页面 + widget.data.tier2
基本上是添加将 widget.data 从 1 更改为 2 的函数。
非常感谢任何澄清，如果有任何不清楚的地方我也很抱歉我是新手:P
here's how it should work 'S' changes to corresponding data
要使其工作的快速而肮脏的解决方案，请创建一个单例来保存层状态。添加以下 class:
class GlobalState {
static final GlobalState _globalState = GlobalState._();
factory GlobalState() {
return _globalState;
}
GlobalState._();
String tier = 'S';
}
在 InkWells 的 onTap 中，将等级设置为您想要的任何等级：
setState(() {
GlobalState().tier = 'S';
});
显示tier时，从单例中抓取值：
AutoSizeText(
GlobalState().tier,
...
我强烈建议研究实施状态管理库，例如 riverpod。
此外，我注意到您将 isFirstButton 和 isSecondButton 都初始化为 false。如果你想默认为标准层，你可以将 isFirstButton 初始化为 true 并将层变量初始化为 'S' （如上面的单例）。
如果您希望更新整个数据对象，您还需要将它们存储在单例中，以便它们可以被应用程序的不同部分 accessed/updated。这就是为什么全局状态不是最好的解决方案，应该实施适当的状态管理。但如果你愿意，可以用单例来完成。
我有 2 个 Inkwell 是 pageView 的控制器，当我按下其中一个时会切换到相应的页面。
Padding(
padding:
const EdgeInsetsDirectional.fromSTEB(0, 12, 1, 0),
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
mainAxisSize: MainAxisSize.max,
children: [
Padding(
padding: const EdgeInsetsDirectional.fromSTEB(
16, 0, 0, 0),
child: InkWell(
onTap: () async {
isSecondButton = false;
isFirstButton = true;
setState(() {});
await pageViewController.animateToPage(
0,
duration: const Duration(milliseconds: 500),
curve: Curves.ease,
);
},
child: Material(
color: Colors.transparent,
elevation: 2,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
child: Container(
width: 100,
height: 100,
decoration: BoxDecoration(
color: const Color(0xFF0D1821),
borderRadius: BorderRadius.circular(8),
shape: BoxShape.rectangle,
border: isFirstButton
? Border.all(color: Colors.white)
: null),
child: Stack(
children: [
Align(
alignment: const AlignmentDirectional(
0, -0.05),
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment:
MainAxisAlignment.center,
children: [
Image.asset(
'assets/images/memes/standardbuild.jpg',
width: 50,
height: 50,
fit: BoxFit.cover,
),
Padding(
padding: EdgeInsetsDirectional
.fromSTEB(0, 8, 0, 0),
child: AutoSizeText(
'STANDARD BUILD',
textAlign: TextAlign.center,
style: GoogleFonts.lexendDeca(
color: Color(0xFF8B97A2),
fontSize: 13,
fontWeight:
FontWeight.normal,
),
),
),
],
),
),
],
),
),
),
),
),
Padding(
padding: const EdgeInsetsDirectional.fromSTEB(
16, 0, 0, 0),
child: Material(
color: Colors.transparent,
elevation: 2,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
child: Container(
width: 100,
height: 100,
decoration: BoxDecoration(
color: const Color(0xFF0D1821),
borderRadius: BorderRadius.circular(8),
border: isSecondButton
? Border.all(color: Colors.white)
: null),
child: InkWell(
onTap: () async {
isSecondButton = true;
isFirstButton = false;
setState(() {});
await pageViewController.animateToPage(
1,
duration:
const Duration(milliseconds: 500),
curve: Curves.ease,
);
},
child: Stack(
children: [
Align(
alignment: const AlignmentDirectional(
0, -0.05),
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment:
MainAxisAlignment.center,
children: [
Image.asset(
'assets/images/memes/pepechad.png',
width: 50,
height: 50,
fit: BoxFit.cover,
),
Padding(
padding: EdgeInsetsDirectional
.fromSTEB(0, 8, 0, 0),
child: AutoSizeText(
'ALTERNATIVE BUILD',
textAlign: TextAlign.center,
style: GoogleFonts.lexendDeca(
color: Color(0xFF8B97A2),
fontSize: 13,
fontWeight:
FontWeight.normal,
),
),
),
],
),
),
],
),
),
),
),
),
],
),
),
),
最重要的是，我想补充一点，在同一个 onTap 上更改小部件的另一个值，下面是一个简单的字符串，存储在模型数据中，并通过 [=14] 调用=]<-- 第一个值和 widget.data.tier2 <-- 第二个值：
Padding(
padding:
const EdgeInsetsDirectional.fromSTEB(0, 0, 0, 15),
child: AutoSizeText(
' lane',
style: GoogleFonts.lexendDeca(
color: Color(0xFF8B97A2),
),
),
),
Container(
width: MediaQuery.of(context).size.width,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: [
AutoSizeText(
widget.data.tier,
style: GoogleFonts.lexendDeca(
color: Color(0xFFFFFFFF),
fontSize: 45,
fontWeight: FontWeight.normal,
),
),
例如：
onTap
第一个按钮 --> 相应的综合浏览页面 + widget.data.tier1
第二个按钮 --> 相应的浏览页面 + widget.data.tier2
基本上是添加将 widget.data 从 1 更改为 2 的函数。
非常感谢任何澄清，如果有任何不清楚的地方我也很抱歉我是新手:P
here's how it should work 'S' changes to corresponding data
要使其工作的快速而肮脏的解决方案，请创建一个单例来保存层状态。添加以下 class:
class GlobalState {
static final GlobalState _globalState = GlobalState._();
factory GlobalState() {
return _globalState;
}
GlobalState._();
String tier = 'S';
}
在 InkWells 的 onTap 中，将等级设置为您想要的任何等级：
setState(() {
GlobalState().tier = 'S';
});
显示tier时，从单例中抓取值：
AutoSizeText(
GlobalState().tier,
...
我强烈建议研究实施状态管理库，例如 riverpod。
此外，我注意到您将 isFirstButton 和 isSecondButton 都初始化为 false。如果你想默认为标准层，你可以将 isFirstButton 初始化为 true 并将层变量初始化为 'S' （如上面的单例）。
如果您希望更新整个数据对象，您还需要将它们存储在单例中，以便它们可以被应用程序的不同部分 accessed/updated。这就是为什么全局状态不是最好的解决方案，应该实施适当的状态管理。但如果你愿意，可以用单例来完成。