flutter - 扑动点指示器到浏览量
问题描述
我想在网页浏览中添加一个点指示器。当一个人从右到左滚动图像时,我的代码上的图像会发生变化。那里没问题,但我无法在我的代码中添加点指示符。当我滚动图像时如何放置点指示器,点也会切换到图像的顺序.......................... ..................................................... …………………………………………………………………………………………
PageView.builder(
itemCount: totalCards.toInt(),
itemBuilder: (context, i) {
return Container(
margin: EdgeInsets.only(top: 10),
child: Container(
child: Column(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Expanded(
child: PageView(
children: <Widget>[
Container(
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(4.0),
image: DecorationImage(
image: AssetImage(
photos[startphoto]),
fit: BoxFit.cover)),
),
Container(
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(4.0),
image: DecorationImage(
image: AssetImage(
photos[startphoto1]),
fit: BoxFit.cover)),
),
Container(
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(4.0),
image: DecorationImage(
image: AssetImage(
photos[startphoto2]),
fit: BoxFit.fitHeight)),
),
Container(
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(4.0),
image: DecorationImage(
image: AssetImage(
photos[startphoto3]),
fit: BoxFit.cover)),
),
],
),
),
],
),
)
);
},
),
),
解决方案
你可以用这个包做到这一点:https ://pub.dev/packages/page_view_indicators
在示例中,您可以看到如何实现它。
编辑:像这样实现你的点指示器:
class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
final ValueNotifier<int> _pageNotifier = new ValueNotifier<int>(0);
final PageController _pageController = new PageController();
@override
Widget build(BuildContext context) {
return Column(
children: [
PageView.builder(
itemCount: totalCards.toInt(),
controller: _pageController,
itemBuilder: (context, i) {
...
},
onPageChanged:(index) {
setState(() {
_pageNotifier.value = index;
});
},
),
Center(
child: CirclePageIndicator(
currentPageNotifier: _pageNotifier,
itemCount: totalCards.toInt(),
),
)
],
);
}
}
推荐阅读
- docker-compose - Splash + HAProxy + Docker Compose (aquarium) - 正在运行但在浏览器中看不到
- spring-boot - 如何使用 Spring-Boot 配置配置 JOOQ 设置?
- c - 无效的变量选择
- mysql - 左连接上的 desc 排序缓慢
- java - 如何配置 android studio 来构建这个项目?
- c# - 将“DataGridView 值”绘制到图表(线或点)
- node.js - 如何在 Node AWS Lambda 中检索输入查询参数
- javascript - Axios - 用é替换重音,例如
- swift - 出现错误“AVCapturePhotoOutput”不可用
- amazon-web-services - 豁免资源使用自己的集成,而其他资源使用 AWS API GW 代理集成