如何在 Flutter 中使用圆圈项目制作列表视图或页面视图并调整当前圆圈的大小?

Question

像这样：https://i.gyazo.com/2d60f65a1801eaaa58bcb1e795f7edec.png 圆圈。 https://gyazo.com/f58e4c5db30013a832b70a839fdc1c03 也可以做这样的事情吗？

Answer 1

//declare these
PageController _pageController = PageController(viewportFraction: 0.5);
int selectedPage = 0;
List yourList =[];

//in initState method
_pageController.addListener(() {
setState(() {
selectedPage = controller.page;
});
});
//inside body
PageView(
controller: _pageController,
itemBuilder: (context, index) {
if (index == selectedPage) {
Container(
alignment: Alignment.center,
height:300.0,
width:300.0,
child: CircleAvatar(
backgroundImage: yourList[index],
//modify as you want
)
)
}
else {
Container(
alignment: Alignment.bottom,
height:100.0,
width:100.0,
child: CircleAvatar(
backgroundImage: yourList[index],
//modify as you want
)
}
},
itemCount: yourList.length,
),