英文:
Using PageView in flutter with dot indicator, on swiping every page need to change the button also just like in ninjacart app
问题
在Flutter中使用PageView与点指示器，每当滑动页面时，需要像NinjaCart应用程序中一样更改按钮。
例如，就像第2页的按钮是“下一步”，第三页的按钮是“捕获”。
英文:
Using PageView in a flutter with dot indicator, on swiping every page need to change the button also just like in NinjaCart app.
For example like page 2 button is "Next", on third-page button is" capture"
<img src="https://i.stack.imgur.com/prUYB.png" width="300">
答案1
得分: 25
以下是翻译后的代码部分：
// 这是一个单点小部件
Widget _indicator(bool isActive) {
return Container(
height: 10,
child: AnimatedContainer(
duration: Duration(milliseconds: 150),
margin: EdgeInsets.symmetric(horizontal: 4.0),
height: isActive ? 10 : 8.0,
width: isActive ? 12 : 8.0,
decoration: BoxDecoration(
boxShadow: [
isActive
? BoxShadow(
color: Color(0XFF2FB7B2).withOpacity(0.72),
blurRadius: 4.0,
spreadRadius: 1.0,
offset: Offset(
0.0,
0.0,
),
)
: BoxShadow(
color: Colors.transparent,
)
],
shape: BoxShape.circle,
color: isActive ? Color(0XFF6BC4C9) : Color(0XFFEAEAEA),
),
),
);
}
// 根据列表视图的长度构建点组小部件
List<Widget> _buildPageIndicator() {
List<Widget> list = [];
for (int i = 0; i < YourListHere.length; i++) {
list.add(i == selectedindex ? _indicator(true) : _indicator(false));
}
return list;
}
// PageView 小部件
PageView.builder(
controller: _pageController,
onPageChanged: (int page) {
setState(() {
selectedindex = page;
});
},
itemCount: YourListHere.length,
<details>
<summary>英文:</summary>
Here is a Single dot widget
```dart
Widget _indicator(bool isActive) {
return Container(
height: 10,
child: AnimatedContainer(
duration: Duration(milliseconds: 150),
margin: EdgeInsets.symmetric(horizontal: 4.0),
height: isActive
? 10:8.0,
width: isActive
? 12:8.0,
decoration: BoxDecoration(
boxShadow: [
isActive
? BoxShadow(
color: Color(0XFF2FB7B2).withOpacity(0.72),
blurRadius: 4.0,
spreadRadius: 1.0,
offset: Offset(
0.0,
0.0,
),
)
: BoxShadow(
color: Colors.transparent,
)
],
shape: BoxShape.circle,
color: isActive ? Color(0XFF6BC4C9) : Color(0XFFEAEAEA),
),
),
);
}
Build the dots group widget by length of the list view
List<Widget> _buildPageIndicator() {
List<Widget> list = [];
for (int i = 0; i < YourListHere.length; i++) {
list.add(i == selectedindex ? _indicator(true) : _indicator(false));
}
return list;
}
PageView Widget
PageView.builder(
controller: _pageController,
onPageChanged: (int page) {
setState(() {
selectedindex = page;
});
},
itemCount: YourListHere.length,
答案2
得分: 8
TabPageSelector 是一个显示分页点的小部件。
https://api.flutter.dev/flutter/material/TabPageSelector-class.html
只需使用 TabController.index = i 来设置高亮显示哪个点。
英文:
TabPageSelector is a widget with shows paging dots.
https://api.flutter.dev/flutter/material/TabPageSelector-class.html
Just use TabController.index = i to set which dot is highlighted.
答案3
得分: 3
你可以知道你的 PageView 在哪个页面，如果你为它提供一个控制器并添加一个监听器到该控制器。然后，你可以有一个变量，它始终保存着你的 PageView 的当前页面，并且你可以根据这个值来改变其他的 Widgets：
声明部分
PageController _pageController = PageController();
double currentPage = 0;
@override
void initState() {
_pageController.addListener(() {
setState(() {
currentPage = _pageController.page;
});
});
super.initState();
}
Widget部分
PageView(
controller: _pageController,
...
)
英文:
You can know which page your PageView is in if you give it a controller and add a listener to that controller. Then you can have a variable that always has the current page of your PageView and you can change other Widgets based on that value:
Declarations
PageController _pageController = PageController();
double currentPage = 0;
@override
void initState() {
_pageController.addListener((){
setState(() {
currentPage = _pageController.page;
});
});
super.initState();
}
Widget
PageView(
controller: _pageController,
...
),
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论