gpt4 book ai didi

Flutter 在转换后的 PageView 中保持旧页面可见

转载 作者:IT王子 更新时间:2023-10-29 07:02:05 24 4
gpt4 key购买 nike

我在 PageController 上使用带有监听器的 PageView 小部件,因此当我滚动 PageView 时,页面将转换为滚动值。我已经实现了这个,但问题是当使用 1.0 的 viewportFraction 时,旧页面会消失。如果我将 viewportFraction 降低到 1.0 以下(例如 0.95),这个问题就不会持续存在,如下所示:

viewportFraction = 1.0,旧页面将消失。

with <code>viewportFraction = 1.0</code>

viewportFraction = 0.95,没问题。

with <code>viewportFraction = 0.95</code>

我需要使用全宽,但我还需要保持非事件页面可见。请帮忙。

下面是我的完整代码:

import 'package:flutter/material.dart';

void main() => runApp(TestApp());

class TestApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primaryColor: Colors.lightBlue,
scaffoldBackgroundColor: Colors.white,
),
home: MainScreen(),
);
}
}

class MainScreen extends StatefulWidget {
final int initialPage;

MainScreen({Key key, this.initialPage = 1}) : super(key: key);

@override
MainScreenState createState() => MainScreenState();

static MainScreenState of(BuildContext context) {
return context.ancestorStateOfType(TypeMatcher<MainScreenState>());
}
}

class MainScreenState extends State<MainScreen> {
final List<GlobalKey<MainPageStateMixin>> _pageKeys = [
GlobalKey(),
GlobalKey(),
GlobalKey(),
];

PageController _pageController;
int _page;
double _pageValue;

@override
void initState() {
super.initState();
_page = widget.initialPage ?? 1;
_pageController = PageController(viewportFraction: 1.0, initialPage: _page);
_pageController.addListener(() {
setState(() => _pageValue = _pageController.page);
});
_pageValue = widget.initialPage.toDouble();
WidgetsBinding.instance.addPostFrameCallback((_) {
_pageKeys[widget.initialPage].currentState.onPageVisible();
});
}

@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: Text("Custom PageView"),
),
body: Container(
child: PageView(
//physics: NeverScrollableScrollPhysics(),
controller: _pageController,
onPageChanged: _onPageChanged,
children: <Widget>[
PeoplePage(key: _pageKeys[0], val: _pageValue, bgColor: Colors.purple,),
TimelinePage(key: _pageKeys[1], val: _pageValue - 1.0, bgColor: Colors.green,),
StatsPage(key: _pageKeys[2], val: _pageValue - 2.0, bgColor: Colors.amber,),
],
),
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: _page,
onTap: _onBottomNavItemPressed,
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
title: Text('people'),
icon: Icon(Icons.people),
),
BottomNavigationBarItem(
title: Text('timeline'),
icon: Icon(Icons.history),
),
BottomNavigationBarItem(
title: Text('stats'),
icon: Icon(Icons.pie_chart),
),
],
),
);
}

@override
void reassemble() {
super.reassemble();
_onPageChanged(_page);
}

void _onPageChanged(int page) {
setState(() => _page = page);
_pageKeys[_page].currentState.onPageVisible();
}

void _onBottomNavItemPressed(int index) {
setState(() => _page = index);
_pageController.animateToPage(
index,
duration: Duration(milliseconds: 400),
curve: Curves.fastOutSlowIn,
);
}
}

abstract class MainPageStateMixin<T extends StatefulWidget> extends State<T> {
void onPageVisible();
}

class PeoplePage extends StatefulWidget {
PeoplePage({Key key, this.val, this.bgColor}) : super(key: key);
final double val;
final Color bgColor;

@override
PeoplePageState createState() => PeoplePageState();
}

class PeoplePageState extends State<PeoplePage> with MainPageStateMixin {

@override
void onPageVisible() {
}

@override
Widget build(BuildContext context) {
return Transform.rotate(
angle: 0.0, //widget.val,
child: Container(
color: widget.bgColor?.withOpacity(0.2),
child: Center(
child: Text('Halaman People ${widget.val}'),
),
),
);
}
}

class TimelinePage extends StatefulWidget {
TimelinePage({Key key, this.val, this.bgColor}) : super(key: key);
final double val;
final Color bgColor;

@override
TimelinePageState createState() => TimelinePageState();
}

class TimelinePageState extends State<TimelinePage> with MainPageStateMixin {
@override
void onPageVisible() {
}

@override
Widget build(BuildContext context) {
Matrix4 _pmat(num pv) {
return Matrix4(
1.0, 0.0, 0.0, 0.0,
0.0, 1.0, 0.0, 0.0,
0.0, 0.0, 1.0, pv * 0.001,
0.0, 0.0, 0.0, 1.0,
);
}

Matrix4 perspective = _pmat(1.0);
double scl = widget.val < 0 ? 1.0 + widget.val / 3.0 : 1.0;

return Transform(
transform: Matrix4.translationValues(widget.val * 200, 0, 0),
child: Transform(
alignment: FractionalOffset.center,
transform: perspective.scaled(scl, scl, scl)
..rotateX(0.0)
..rotateY(widget.val < 0 ? widget.val * -1.0 : 0.0)
..rotateZ(0.0),
child: Container(
color: widget.bgColor?.withOpacity(0.2),
child: Center(
child: Text('Halaman Timeline ${widget.val}'),
),
),
),
);
}
}

class StatsPage extends StatefulWidget {
StatsPage({Key key, this.val, this.bgColor}) : super(key: key);
final double val;
final Color bgColor;

@override
StatsPageState createState() => StatsPageState();
}

class StatsPageState extends State<StatsPage> with MainPageStateMixin {
@override
void onPageVisible() {
}

@override
Widget build(BuildContext context) {
return Transform.translate(
offset: Offset((widget.val + 1.0) * 100.0, 0.0),
child: Container(
color: widget.bgColor?.withOpacity(0.2),
child: Center(
child: Text('Halaman Stats ${widget.val}'),
),
),
);
}
}

最佳答案

没关系,我使用 viewportFraction: 0.999 来解决这个问题。

the inactive page still visible this way

关于Flutter 在转换后的 PageView 中保持旧页面可见,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57448696/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com