dart 图像滑块不随图像网格索引移动

t1qtbnec  于 2023-11-14  发布在  其他
关注(0)|答案(1)|浏览(97)

我有一个图像滑块在剪辑React部件,有一个网格视图的图像在底部,像画廊.但当我滑动图像改变其在网格部分的索引,但当我点击网格和改变从那里它不能改变图片
这是我的代码,有人知道这个问题吗?

  1. import 'package:carousel_slider/carousel_slider.dart';
  2. import 'package:flutter/material.dart';
  3. import 'package:flutter_screenutil/flutter_screenutil.dart';
  4. import 'package:osticket_app/ticket_details/attachments/attachement_preview.dart';
  5. import 'package:osticket_app/utils/colors.dart';
  6. import '../../utils/responsive_layout.dart';
  7. class MyCustomMobileContent extends StatelessWidget {
  8. const MyCustomMobileContent({super.key});
  9. @override
  10. Widget build(BuildContext context) {
  11. return const Scaffold(
  12. body: ResposiveLayout(
  13. mobileBody: ImageSlider(),
  14. ),
  15. );
  16. }
  17. }
  18. List<String> imgList = [
  19. 'assets/images/attachment.png',
  20. 'assets/images/school.png',
  21. 'assets/images/medic.png',
  22. 'assets/images/attachment.png',
  23. 'assets/images/medic.png',
  24. 'assets/images/school.png',
  25. 'assets/images/attachment.png',
  26. 'assets/images/medic.png',
  27. ];
  28. class ImageSlider extends StatefulWidget {
  29. const ImageSlider({super.key});
  30. @override
  31. State<ImageSlider> createState() => _ImageSliderState();
  32. }
  33. class _ImageSliderState extends State<ImageSlider> {
  34. late List<Widget> imageSliders;
  35. int _current = 0;
  36. int selected = 0;
  37. final CarouselController _controller = CarouselController();
  38. @override
  39. Widget build(BuildContext context) {
  40. imageSliders = imgList
  41. .map(
  42. (item) => ClipRRect(
  43. borderRadius: BorderRadius.circular(
  44. 10.r,
  45. ),
  46. child: Stack(
  47. children: <Widget>[
  48. Center(
  49. child: GestureDetector(
  50. onTap: () {
  51. Navigator.of(context).push(
  52. MaterialPageRoute(
  53. builder: (ctx) => AttachementPreview(
  54. image: item,
  55. ),
  56. ),
  57. );
  58. },
  59. child: Image.asset(
  60. fit: BoxFit.fill,
  61. item,
  62. ),
  63. ),
  64. ),
  65. ],
  66. ),
  67. ),
  68. )
  69. .toList();
  70. return Scaffold(
  71. appBar: AppBar(
  72. actions: [
  73. Padding(
  74. padding: EdgeInsets.only(right: 10.w),
  75. child: TextButton(
  76. onPressed: () {},
  77. child: Text(
  78. 'Download',
  79. style: TextStyle(
  80. fontSize: 14.sp,
  81. color: buttonColor,
  82. fontWeight: FontWeight.w500),
  83. ),
  84. ),
  85. ),
  86. ],
  87. bottom: PreferredSize(
  88. preferredSize: Size.fromHeight(
  89. 1.h,
  90. ),
  91. child: Divider(
  92. color: textFieldBg,
  93. height: 2.h,
  94. ),
  95. ),
  96. ),
  97. body: Column(
  98. children: [
  99. Container(
  100. decoration: BoxDecoration(
  101. border: Border.all(
  102. width: 1.w,
  103. color: textFieldBg,
  104. )),
  105. child: CarouselSlider(
  106. items: imageSliders,
  107. carouselController: _controller,
  108. options: CarouselOptions(
  109. height: 500.h,
  110. viewportFraction: 1,
  111. autoPlay: false,
  112. // enlargeCenterPage: true,
  113. aspectRatio: 2.0,
  114. onPageChanged: (index, reason) {
  115. setState(() {
  116. _current = index;
  117. });
  118. }),
  119. ),
  120. ),
  121. SizedBox(
  122. height: 20.h,
  123. ),
  124. Text(
  125. 'Medical-claim-cardiologist.png',
  126. style: TextStyle(fontSize: 14.sp, fontWeight: FontWeight.w700),
  127. ),
  128. SizedBox(
  129. height: 20.h,
  130. ),
  131. Row(
  132. mainAxisAlignment: MainAxisAlignment.center,
  133. children: imgList.asMap().entries.map((entry) {
  134. return GestureDetector(
  135. onTap: () => _controller.animateToPage(entry.key),
  136. child: Container(
  137. width: 8.w,
  138. height: 8.h,
  139. margin: EdgeInsets.symmetric(vertical: 8.h, horizontal: 4.w),
  140. decoration: BoxDecoration(
  141. shape: BoxShape.circle,
  142. color: (Theme.of(context).brightness == Brightness.dark
  143. ? backgroundColor
  144. : buttonColor)
  145. .withOpacity(_current == entry.key ? 0.9 : 0.2),
  146. ),
  147. ),
  148. );
  149. }).toList(),
  150. ),
  151. SizedBox(
  152. height: 20.h,
  153. ),
  154. SizedBox(
  155. height: 85.h,
  156. // width: 350.w,
  157. child: ListView.builder(
  158. scrollDirection:
  159. Axis.horizontal, // Set the scroll direction to horizontal
  160. itemCount: imgList.length,
  161. itemBuilder: (context, index) {
  162. return Padding(
  163. padding:
  164. EdgeInsets.symmetric(horizontal: 10.h, vertical: 10.w),
  165. child: GestureDetector(
  166. onTap: () {
  167. setState(() {
  168. _current = index;
  169. });
  170. },
  171. child: Container(
  172. padding: EdgeInsets.all(1.w),
  173. decoration: BoxDecoration(
  174. borderRadius: BorderRadius.circular(6.r),
  175. border: Border.all(
  176. width: 1.6.w,
  177. color: _current == index
  178. ? buttonColor
  179. : Colors.transparent),
  180. ),
  181. child: Image.asset(
  182. imgList[index],
  183. width: 50.w, // Set the width of the image
  184. height: 150.h, // Set the height of the image
  185. fit: BoxFit
  186. .fitHeight, // You can adjust the fit as needed
  187. ),
  188. ),
  189. ),
  190. );
  191. },
  192. ),
  193. ),
  194. // ListView.builder(itemBuilder: itemBuilder)
  195. ],
  196. ),
  197. );
  198. }
  199. }

字符串
正如你可以看到的代码,我希望你理解我的问题,并尝试尽快解决这个问题,提前感谢


的数据

dgenwo3n

dgenwo3n1#

改变这个:

  1. onTap: () => _controller.animateToPage(entry.key),

字符串
对此:

  1. onTap:(){
  2. setState((){
  3. _controller.animateToPage(entry.key),
  4. }}

相关问题