英文:
PageView builder starts from first index
问题
以下是您提供的代码的翻译部分：
我正在进行一个使用PageView builder的项目。我想要从点击的索引打开屏幕，但它总是从索引0开始。如何在向左和向右滑动的情况下以当前索引显示它们？
这是我的代码-
GridView.builder(
itemCount: snapshot.data!.data.length,
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
onTap: () {
showDialog(
context: context,
builder: (
BuildContext context) {
return PageView.builder(
controller: _pageController,
itemCount: snapshot.data!.data.length,
scrollDirection: Axis.horizontal,
reverse: false,
//onPageChanged: (page) => setState(() => _activeImageIndex = page),
itemBuilder: (BuildContext context, int index) {
return Center(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 4.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white,
),
height: 300.h,
width: 1.sw,
child: Image.network(snapshot.data!.data[index].thumb, fit: BoxFit.cover,),
),
),
);
},
);
});
},
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
height: 150.h,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.r),
image: DecorationImage(
image: NetworkImage(
snapshot.data!.data[index].thumb.toString()
),
fit: BoxFit.cover
),
),
),
Container(
padding: EdgeInsets.symmetric(vertical: 3.h, horizontal: 2.w),
child: Align(alignment: Alignment.center,child: Text(snapshot.data!.data[index].prodName,
style: TextStyle(color: kblue, fontSize: 15.sp, fontWeight: FontWeight.w400),),)
)
]),
);
},
);
希望这对您有所帮助！如果您有任何其他疑问，请随时提出。
英文:
I am working on a project which uses PageView builder. I want to open screens from the onClick index, but it always starts from index 0. How can I display them with current index with swipe up left and right both direction?
Here is my code-
GridView.builder(
itemCount: snapshot.data!.data.length,
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
onTap: () {
showDialog(
context: context,
builder: (
BuildContext context) {
return PageView.builder(
controller: _pageController,
itemCount: snapshot.data!.data.length,
scrollDirection: Axis.horizontal,
reverse: false,
//onPageChanged: (page) => setState(() => _activeImageIndex = page),
itemBuilder: (BuildContext context, int index) {
return Center(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 4.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white,
),
height: 300.h,
width: 1.sw,
child: Image.network(snapshot.data!.data[index].thumb, fit: BoxFit.cover,),
),
),
);
},
);
});
},
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
height: 150.h,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.r),
image: DecorationImage(
image: NetworkImage(
snapshot.data!.data[index].thumb.toString()
),
fit: BoxFit.cover
),
),
),
Container(
padding: EdgeInsets.symmetric(vertical: 3.h, horizontal: 2.w),
child: Align(alignment: Alignment.center,child: Text(snapshot.data!.data[index].prodName,
style: TextStyle(color: kblue, fontSize: 15.sp, fontWeight: FontWeight.w400),),)
)
]),
);
},
);
答案1
得分: 1
Create一个新的有状态页面CustomPageView，其中包含两个变量int index 和 List imageList，并在构造函数中将它们设为必需：
import 'package:flutter/material.dart';
class CustomPageView extends StatefulWidget {
final int index;
final List imageList;
const CustomPageView({Key? key,
required this.index,
required this.imageList,
}) : super(key: key);
@override
State<CustomPageView> createState() => _CustomPageViewState();
}
class _CustomPageViewState extends State<CustomPageView> {
late PageController _pageController;
@override
void initState() {
_pageController = PageController(initialPage: widget.index);
// 此处控制器获取索引并滚动到该页面
super.initState();
}
@override
void dispose() {
_pageController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: PageView.builder(
controller: _pageController,
itemCount: widget.imageList.length,
scrollDirection: Axis.horizontal,
reverse: false,
itemBuilder: (BuildContext context, index) {
return Center(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 4.0),
child: Container(
height: 300,
width: 100,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white,
),
child: Image.network(widget.imageList[index], fit: BoxFit.cover,),
),
),
);
},
)
);
}
}
在showDialog中，只需导入并返回CustomPageView，同时传递所需的参数：
return CustomPageView(index: index, imageList: snapshot.data!.data.thumb);
希望这对你有所帮助。
英文:
Create a new Stateful Page CustomPageView with two variables int index and List imageList and make them required inside contructor:
import 'package:flutter/material.dart';
class CustomPageView extends StatefulWidget {
final int index;
final List imageList;
const CustomPageView({Key? key,
required this.index,
required this.imageList,
}) : super(key: key);
@override
State<CustomPageView> createState() => _CustomPageViewState();
}
class _CustomPageViewState extends State<CustomPageView> {
late PageController _pageController;
@override
void initState() {
_pageController = PageController(initialPage: widget.index);
//this is here the controller takes the index and scrolls to that Page
super.initState();
}
@override
void dispose() {
_pageController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: PageView.builder(
controller: _pageController,
itemCount: widget.imageList.length,
scrollDirection: Axis.horizontal,
reverse: false,
itemBuilder: (BuildContext context, index) {
return Center(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 4.0),
child: Container(
height: 300,
width: 100,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white,
),
child: Image.network(widget.imageList[index], fit: BoxFit.cover,),
),
),
);
},
)
);
}
}
and in showDialog simply import and return CustomPageView. also, pass the required parameters.
return CustomPageView(index: index, imageList: snapshot.data!.data.thumb);
hopefully it will work
答案2
得分: 0
在对话框中，我认为你应该使用StatefulBuilder来包装，以便使用setState来显示更改。以下是示例代码：
showDialog(
context: context,
builder: (
BuildContext context,
) {
return StatefulBuilder(builder: (context, setState) {
return PageView.builder(
controller: _pageController,
itemCount: snapshot.data!.data.length,
scrollDirection: Axis.horizontal,
reverse: false,
onPageChanged: (page) => setState(() => _activeImageIndex = page),
// 其他代码部分...
);
});
},
);
请注意，这只是代码的一部分，你需要将其嵌入到你的完整代码中。
英文:
I think in the dialog, you should wrap StatefulBuilder to show changes using setState. Here you can see example.
showDialog(
context: context,
builder: (
BuildContext context) {
return StatefulBuilder(builder: (context,setState){return PageView.builder(
controller: _pageController,
itemCount: snapshot.data!.data.length,
scrollDirection: Axis.horizontal,
reverse: false,
onPageChanged: (page) => setState(() => _activeImageIndex = page),
..........
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论