英文:
When the carousel ends show button next to it
问题
当用户完成浏览轮播中的4张图片后，我想显示一个"查看更多"按钮，就像下面的图片一样。
(https://i.stack.imgur.com/A3haM.jpg)
我尝试添加另一个轮播幻灯片，并只放置按钮，但它看起来像一个卡片，不太合适，我只需要一点空间和这个按钮出现。
这是轮播的代码：
CarouselSlider(
options: CarouselOptions(
height: 200.0,
enlargeCenterPage: true,
aspectRatio: 16 / 9,
autoPlayCurve: Curves.fastOutSlowIn,
enableInfiniteScroll: false,
autoPlayAnimationDuration: const Duration(milliseconds: 800),
viewportFraction: 0.8,
onPageChanged: (index, reason) {
setState(() {
_currentIndex = index;
});
},
),
items: cardList.map((card) {
return Builder(builder: (BuildContext context) {
return Container(
height: MediaQuery.of(context).size.height * 0.30,
width: MediaQuery.of(context).size.width,
child: Card(
color: Colors.blueAccent,
child: card,
),
);
});
}).toList(),
)
请注意，按钮部分并未包含在您提供的代码段中，您可能需要额外添加按钮以实现您的需求。
英文:
When the user is done browsing the 4 images in the carousel i want to show a see more button like the image below.
(https://i.stack.imgur.com/A3haM.jpg)
I've tried adding another carousel slide and only putting the button in it but it looks like a card and it dosen't looks right i just need a little bit of space and this button to apear.
This is the carousel:
CarouselSlider(
options: CarouselOptions(
height: 200.0,
enlargeCenterPage: true,
aspectRatio: 16 / 9,
autoPlayCurve: Curves.fastOutSlowIn,
enableInfiniteScroll: false,
autoPlayAnimationDuration: const Duration(milliseconds: 800),
viewportFraction: 0.8,
onPageChanged: (index, reason) {
setState(() {
_currentIndex = index;
});
},
),
items: cardList.map((card) {
return Builder(builder: (BuildContext context) {
return Container(
height: MediaQuery.of(context).size.height * 0.30,
width: MediaQuery.of(context).size.width,
child: Card(
color: Colors.blueAccent,
child: card,
),
);
});
}).toList(),
),
答案1
得分: 1
这应该适用于您：
这应该适用于您：
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
final CarouselController buttonCarouselController = CarouselController();
final List list = ["a", "b", "c", "d", "e"];
bool showNext = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.black,
),
body: Stack(
alignment: Alignment.bottomRight,
children: [
CarouselSlider.builder(
itemCount: list.length,
carouselController: buttonCarouselController,
options: CarouselOptions(
height: 200,
enlargeCenterPage: true,
aspectRatio: 16 / 9,
autoPlayCurve: Curves.fastOutSlowIn,
enableInfiniteScroll: false,
autoPlayAnimationDuration: const Duration(milliseconds: 800),
viewportFraction: 0.8,
onPageChanged: (index, reason) {
if(list[index] == list.last){
setState(() {
showNext = true;
});
}else{
if(showNext){
setState(() {
showNext = false;
});
}
}
},
),
itemBuilder: (BuildContext context, int itemIndex, int pageViewIndex) {
return Container(
color: Colors.grey,
alignment: Alignment.center,
child: Text(list[itemIndex]),
);
}
),
Visibility(
visible: showNext,
child: IconButton(
onPressed: (){
buttonCarouselController.jumpToPage(0);
},
icon: const Icon(Icons.arrow_forward,size: 30,),
),
),
],
)
);
}
}
<details>
<summary>英文:</summary>
This should work for you:
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
final CarouselController buttonCarouselController = CarouselController();
final List list = ["a", "b", "c", "d", "e"];
bool showNext = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.black,
),
body: Stack(
alignment: Alignment.bottomRight,
children: [
CarouselSlider.builder(
itemCount: list.length,
carouselController: buttonCarouselController,
options: CarouselOptions(
height: 200,
enlargeCenterPage: true,
aspectRatio: 16 / 9,
autoPlayCurve: Curves.fastOutSlowIn,
enableInfiniteScroll: false,
autoPlayAnimationDuration: const Duration(milliseconds: 800),
viewportFraction: 0.8,
onPageChanged: (index, reason) {
if(list[index] == list.last){
setState(() {
showNext = true;
});
}else{
if(showNext){
setState(() {
showNext = false;
});
}
}
},
),
itemBuilder: (BuildContext context, int itemIndex, int pageViewIndex) {
return Container(
color: Colors.grey,
alignment: Alignment.center,
child: Text(list[itemIndex]),
);
}
),
Visibility(
visible: showNext,
child: IconButton(
onPressed: (){
buttonCarouselController.jumpToPage(0);
},
icon: const Icon(Icons.arrow_forward,size: 30,),
),
),
],
)
);
}
}
[![Pic][1]][1]
[1]: https://i.stack.imgur.com/IwS4y.png
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论