问题
On clicking the Go button I want button 1 to turn red. Then turn back white. Then button 2 should turn red & then reverts back to white. Then 3, 4 and so on.
I can design my callback button such that button 1 turns red. I am not sure, how to turn it back to white after 2 second & then turn the next button red & so on.
main.dart
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
final String apptitle = 'Test';
Widget _goButtonClickCallback() {
print("hello world. go tapped");
// How do I control animation inside numListBuilder() from here?
}
@override
Widget build(BuildContext context) {
var numList = [
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
];
return MaterialApp(
title: apptitle,
theme: ThemeData(
primarySwatch: Colors.deepOrange,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: Scaffold(
appBar: AppBar(
title: Text(apptitle),
),
body: Column(
children: [
NumberListBuilder(numList),
SizedBox(height: 110),
GoButton(_goButtonClickCallback)
],
)),
);
}
}
NumberListBuilder.dart
import 'package:flutter/material.dart';
class NumberListBuilder extends StatefulWidget {
final List<String> numberList;
const NumberListBuilder(this.numberList);
@override
_NumberListBuilderState createState() => _NumberListBuilderState();
}
class _NumberListBuilderState extends State<NumberListBuilder> {
List<TableRow> getButtonRows() {
// list for all rows
List<TableRow> rows = [];
int numCols = 2;
int numberListLength = widget.numberList.length;
int numRows = 4
var k = 0;
for (var i = 0; i < numRows; i++) {
List<Widget> rowChildren = [];
for (var j = 0; j < numCols; j++) {
rowChildren.add(Container(
height: 80.0,
child: FlatButton(
color: Colors.white70,
onPressed: () {},
child: Text(
widget.numberList[k++],
style: TextStyle(
fontSize: 20.0,
),
),
)));
}
rows.add(new TableRow(children: rowChildren));
}
return rows;
}
@override
Widget build(BuildContext context) {
return new Container(
child: new Table(
border: TableBorder.all(),
children: getButtonRows(),
),
);
}
}
回答1:
So to explain this simply, you need to redraw your entire grid every 2 seconds, and in that build method, put a condition as to which box it will paint in red and which to paint white.
The problem is that you have another class drawing your boxes, but you want to control how it does so from the main class. This can be done but its messy, better to put them into same class. I have done this for you.
Disclaimer: There are better more efficient ways of doing this, but this should get you started since I changed as little as possible.
Things I changed:
Box drawing class I added conditional
color: k == numberToHighlight-1 ? Colors.red : Colors.white70,this just checks if the box should be highlighted red otherwise its white.Moved the entire build of boxes into main class so that the state can be modified easily. I basically just made a method with same name as your class that built boxes.
Added state
int numberToHighlight = 0;Added a method that calls itself after a delay until its colored all the boxes, then stops calling itself and resets the value to 0.
Changed GoButton into FlatButton (because you have not shared that code) this isn't a problem.
Here is the entire code that works (minimal changes to yours):
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
final String apptitle = 'Test';
int numberToHighlight = 0;
var numList = [
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
];
void _goButtonClickCallback() {
print("hello world. go tapped setting ${numberToHighlight}");
if(numberToHighlight < numList.length)
{
setState(() {
numberToHighlight++;
});
Future.delayed(const Duration(seconds: 2), _goButtonClickCallback);
}
else
{
setState(() {
numberToHighlight = 0;
});
}
}
@override
Widget build(BuildContext context) {
List<TableRow> getButtonRows() {
// list for all rows
List<TableRow> rows = [];
int numCols = 2;
int numberListLength = numList.length;
int numRows = 4;
var k = 0;
for (var i = 0; i < numRows; i++) {
List<Widget> rowChildren = [];
for (var j = 0; j < numCols; j++) {
rowChildren.add(Container(
height: 80.0,
child: FlatButton(
color: k == numberToHighlight-1 ? Colors.red : Colors.white70,
onPressed: () {},
child: Text(
numList[k++],
style: TextStyle(
fontSize: 20.0,
),
),
)));
}
rows.add(new TableRow(children: rowChildren));
}
return rows;
}
Widget numberListbuilder()
{
return new Container(
child: new Table(
border: TableBorder.all(),
children: getButtonRows(),
),
);
}
return MaterialApp(
title: apptitle,
theme: ThemeData(
primarySwatch: Colors.deepOrange,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: Scaffold(
appBar: AppBar(
title: Text(apptitle),
),
body: Column(
children: [
numberListbuilder(),
SizedBox(height: 110),
FlatButton(
onPressed: _goButtonClickCallback,
child: Text("GO!"),
color: Colors.blue,
)
],
)),
);
}
}
回答2:
hi dear on click of go button you need to call a timer first you set the color of each button before timer you set the color to red and inside timer set the color to white try it with 1 button and proceed with other in similar way thank i hope it will help
Timer(Duration(seconds: 2),(){
//set the color
});
来源：https://stackoverflow.com/questions/63611518/change-color-of-multiple-buttons-one-after-the-other-in-flutter