水平列表视图中 GestureDector 小部件的自动 onTap 操作

Question

我正在尝试创建一个容器的水平列表视图，这些容器会在点击时改变颜色。我想使"压制"和"未压制"，以便一次只能按下一个容器，如果按下另一个容器，则以前的压制容器将重新绘制为未压制的颜色。我打算使用带有回调函数的有状态小部件来执行此操作，该函数使用 setState 方法来更改颜色并更新包含每个容器颜色状态的映射。

首先，我只想打印到我正在按下的容器的控制台，但似乎它一次按下了多个容器。我该如何解决这个问题？如果有更好的方法来改变容器的颜色，请分享。

容器小部件代码：

class Box extends StatefulWidget {
int color;
int index;
Function callback;
Box(this.color, this.index, this.callback);
@override
_BoxState createState() => _BoxState(color, index, callback);
}
class _BoxState extends State<Box> {
int color;
int index;
Function callback;
_BoxState(this.color, this.index, this.callback);
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: callback(index),
child: Container(
width: 150.0,
decoration: new BoxDecoration(
color: Color(color),
shape: BoxShape.circle,
),
child: Center(child: Text("${index + 1}"))));
}
}

我实现水平列表视图的页面：

class TestPage extends StatelessWidget {
int _selected;

var pressStates = {
//Color states of each container
//unpressed = 0xFFD0D0DE
//pressed = 0xFF8A2BE2
1: 0xFFD0D0DE,
2: 0xFFD0D0DE,
3: 0xFFD0D0DE,
4: 0xFFD0D0DE,
5: 0xFFD0D0DE,
6: 0xFFD0D0DE,
7: 0xFFD0D0DE,
8: 0xFFD0D0DE,
9: 0xFFD0D0DE,
10: 0xFFD0D0DE,
11: 0xFFD0D0DE,
12: 0xFFD0D0DE,
};
@override
Widget build(BuildContext context) {
var _width = MediaQuery.of(context).size.width;
callback(int index) {
_selected = index + 1;
print("tapped ${index + 1}, state: ${_selected}");
}
final _test = ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: pressStates.length,
itemBuilder: (context, index) {
return Box(pressStates[index + 1], index, callback);
});
return new Scaffold(
backgroundColor: Colors.black54,
body: new Container(height: 300.0, width: _width, child: _test),
);
}
}

控制台输出：

I/flutter (11600): tapped 1, state: 1
I/flutter (11600): tapped 2, state: 2
I/flutter (11600): tapped 3, state: 3
I/flutter (11600): tapped 4, state: 4
I/flutter (11600): tapped 5, state: 5

Answer 1

如果只是将onTap属性替换为

onTap: () { callback(index); },

但是你应该重构你的代码，使测试类成为一个StatefulWidget，因为它保存所选圆圈的状态。并使盒子无状态。

import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: TestPage(),
);
}
}
class TestPage extends StatefulWidget {
@override
TestPageState createState() {
return new TestPageState();
}
}
class TestPageState extends State<TestPage> {
int _selected;
var selectedColor = 0xFFD000DE;
var unselectedColor = 0xFFD0D0DE;
callback(int index) {
_selected = index;
setState(() {});
print("tapped ${index + 1}, state: ${_selected}");
}
@override
Widget build(BuildContext context) {
var _width = MediaQuery.of(context).size.width;
final _test = ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 12,
itemBuilder: (context, index) {
return Box(
_selected == index ? selectedColor : unselectedColor,
index,
callback,
);
});
return new Scaffold(
backgroundColor: Colors.black54,
body: Container(height: 300.0, width: _width, child: _test),
);
}
}
class Box extends StatelessWidget {
final int color;
final int index;
final Function callback;
Box(this.color, this.index, this.callback);
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
callback(index);
},
child: Container(
width: 150.0,
decoration: new BoxDecoration(
color: Color(color),
shape: BoxShape.circle,
),
child: Center(child: Text("${index + 1}"))));
}
}