flutter - 在列表视图中添加点在颤动中滚动
问题描述
我需要在网格视图中以 3X3 滚动显示类别,它工作正常,滑动也工作正常,但我无法实现滚动的点。我需要像 carousal 一样。是否可以使用列表视图添加点
SingleChildScrollView(
child: GridView.count(
physics: ScrollPhysics(),
padding: EdgeInsets.fromLTRB(16, 16, 16, 0),
primary: false,
childAspectRatio: 1.1,
shrinkWrap: true,
crossAxisSpacing: 0,
mainAxisSpacing: 0,
crossAxisCount: 4,
// mainAxisCount:2,
//scrollDirection: Axis.horizontal,
children: List.generate(categoryData.length, (index) {
return GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ProductCategoryPage(
categoryId: categoryData[index].id,
categoryName:
categoryData[index].name)));
},
child: Column(children: [
buildCacheNetworkImage(
width: 40,
height: 40,
url: categoryData[index].image,
plColor: Colors.transparent),
Flexible(
child: Container(
margin: EdgeInsets.fromLTRB(0, 10, 0, 0),
child: Text(
categoryData[index].name,
style: TextStyle(
color: CHARCOAL,
fontWeight: FontWeight.normal,
fontSize: 12,
),
textAlign: TextAlign.center,
),
),
)
]));
}),
),
)
我需要在列表视图中获取滚动点,那么如何实现
解决方案
您应该按照以下方式实施
代码 :
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List<String> list = [];
int perPageItem = 16;
int pageCount;
int selectedIndex = 0;
int lastPageItemLength;
PageController pageController;
@override
void initState() {
pageController = PageController(initialPage: 0);
for (int i = 1; i <= 45; i++) {
list.add('$i');
}
var num = (list.length / perPageItem);
pageCount = num.isInt ? num.toInt() : num.toInt() + 1;
var reminder = list.length.remainder(perPageItem);
lastPageItemLength = reminder == 0 ? perPageItem : reminder;
super.initState();
}
@override
void dispose() {
pageController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Column(
children: [
SizedBox(
height: 390,
child: PageView.builder(
controller: pageController,
itemCount: pageCount,
onPageChanged: (index) {
setState(() {
selectedIndex = index;
});
},
itemBuilder: (_, pageIndex) {
return GridView.count(
physics: NeverScrollableScrollPhysics(),
padding: const EdgeInsets.fromLTRB(16, 16, 16, 0),
primary: false,
childAspectRatio: 1.1,
shrinkWrap: true,
crossAxisSpacing: 0,
mainAxisSpacing: 0,
crossAxisCount: 4,
children: List.generate(
(pageCount - 1) != pageIndex
? perPageItem
: lastPageItemLength, (index) {
return GestureDetector(
onTap: () {},
child: Container(
width: 50,
height: 50,
margin: const EdgeInsets.all(5),
color: Colors.amber,
alignment: Alignment.center,
child: Text(
list[index + (pageIndex * perPageItem)],
style: TextStyle(color: Colors.black, fontSize: 20),
),
),
);
}),
);
}),
),
SizedBox(
height: 15,
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: pageCount,
itemBuilder: (_, index) {
return GestureDetector(
onTap: () {
pageController.animateToPage(index, duration: Duration(milliseconds: 500), curve: Curves.easeInOut);
},
child: AnimatedContainer(
duration: Duration(milliseconds: 100),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(10)),
color: Colors.red
.withOpacity(selectedIndex == index ? 1 : 0.5)),
margin: EdgeInsets.all(5),
width: 10,
height: 10,
),
);
},
),
),
],
),
);
}
}
extension NumExtensions on num {
bool get isInt => (this % 1) == 0;
}
推荐阅读
- javascript - SAPUI5 Handling busy indicator in function import
- python - Pandas 数据透视表中的平均值
- redis - 卸载 Redis 会清除它的内存数据吗?
- ruby-on-rails - Rails + Devise Login flash 消息错误显示
- database - 在 Cloud Firestore(NoSQL 数据库)中构建文档的最佳方式?
- php - 如何使用程序而不是 PDO 获取 json 中的值
- javascript - Google Maps Javascript API 无法可靠加载
- azure-api-management - 从响应对象中提取非字符串值
- javascript - 我如何才能对我的项目实施分页
- c# - 布尔到图像转换器不起作用。图像没有改变