flutter - 可滚动小部件内的 Flutter PageView
问题描述
在我的应用程序中，我有一个页面浏览量，其中包含一些页面
如您所见，我想念更多尺寸的屏幕
import 'package:flutter/material.dart';
main() {
runApp(MaterialApp(
theme: ThemeData(
primarySwatch: Colors.indigo,
),
home: App(),
));
}
class App extends StatefulWidget {
@override
State<App> createState() => _AppState();
}
class _AppState extends State<App> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverToBoxAdapter(
child: Column(
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height,
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 50.0),
child: Text(
'test text',
textAlign: TextAlign.center,
style: TextStyle(color: Colors.black),
),
),
Expanded(
flex: 1,
child: PageView(
reverse: true,
onPageChanged: (i) {},
children: <Widget>[
ConstrainedBox(
constraints: const BoxConstraints.expand(),
child: Container(
margin: EdgeInsets.fromLTRB(8.0, 8.0, 8.0, 12.0),
child: Container(
color: Colors.indigo[400],
child: Column(
children: <Widget>[
Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('33333333333333')),
],
),
),
),
),
ConstrainedBox(
constraints: const BoxConstraints.expand(),
child: Container(
margin: EdgeInsets.fromLTRB(8.0, 8.0, 8.0, 12.0),
child: Container(
color: Colors.indigo[400],
child: Column(
children: <Widget>[
Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('33333333333333')),
],
),
),
),
),
ConstrainedBox(
constraints: const BoxConstraints.expand(),
child: Container(
margin: EdgeInsets.fromLTRB(8.0, 8.0, 8.0, 12.0),
child: Container(
color: Colors.indigo[400],
child: Column(
children: <Widget>[
Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('11111111111111')),
Padding(padding: EdgeInsets.symmetric(vertical: 30.0), child: Text('33333333333333')),
],
),
),
),
),
],
),
),
],
),
),
],
),
),
],
),
);
}
}
我怎样才能将此页面视图放入可滚动的小部件（例如列表视图）中而没有任何问题？
当我把它放进去listview或者expandable我得到错误
我想拥有什么？
ScrollableWidget [ 容器，页面浏览 [ page1(), page1(), page3() ] ]
解决方案
这个问题有一种不同的方法，而不是让所有东西都可以滚动，而是只在键盘可见时滚动标题。
你需要使用keyboard_visibility插件。
请检查此代码
class FragmentProfile extends StatefulWidget {
.......
@override
State<FragmentProfile> createState() => _FragmentPage();
}
class _FragmentPage extends State<FragmentProfile> {
....
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return ....
}
}
class ProfilePage extends StatefulWidget {
@override
State<ProfilePage> createState() => _ProfilePageState();
}
class _ProfilePageState extends State<ProfilePage> {
.....
ScrollController _scrollController;
....
@override
void initState() {
super.initState();
.....
_scrollController = ScrollController();
KeyboardVisibilityNotification().addNewListener(
onChange: (bool visible) {
if(visible){
final offset = _scrollController.offset;
print("current offset = ${offset}");
_scrollController.animateTo(
offset+50.0,
duration: Duration(milliseconds: 100),
curve: Curves.easeIn);
}else{
final offset = _scrollController.offset;
print("current offset = ${offset}");
_scrollController.animateTo(
offset-50.0,
duration: Duration(milliseconds: 100),
curve: Curves.easeIn);
}
},
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.transparent,
body: Directionality(
textDirection: TextDirection.rtl,
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height - 130,
child: NestedScrollView(
controller: _scrollController,
headerSliverBuilder:(BuildContext context, bool innerBoxIsScrolled){
return <Widget>[
SliverAppBar(
title: Component1(),
),
centerTitle: true,
bottom: _buildMenuBar(context),
//pinned: true,
floating: true,
forceElevated: innerBoxIsScrolled,
)
];
} ,
body: PageView(
controller: _pageController,
reverse: true,
onPageChanged: (i) {},
children: <Widget>[
ConstrainedBox(
constraints: const BoxConstraints.expand(),
child: Container(
margin: EdgeInsets.fromLTRB(8.0, 8.0, 8.0, 12.0),
child: BmiCalculator(),
),
),
ConstrainedBox(
constraints: const BoxConstraints.expand(),
child: ....
),
ConstrainedBox(
constraints: const BoxConstraints.expand(),
child: Directionality(
textDirection: TextDirection.rtl,
child: Container(
margin: EdgeInsets.fromLTRB(8.0, 8.0, 8.0, 12.0),
child: UserProfileForm(),
),
),
),
],
),
)
),
));
}
Widget _buildMenuBar(BuildContext context) {
....
}
}
推荐阅读
- mysql - 从 docker 容器上的 grails 服务访问 mysql 服务被拒绝
- php - CKEditor BalloonEditor Ajax 保存
- sql - DROP TABLE by CONCAT table name with VALUE from another SELECT [SQLite]
- java - Java Arraylist 程序未通过测试
- reactjs - SpringData JPA 方法或查询以使用 Postgres 列执行算术运算
- r - 如何用 lapply 引导？R中的boot（）引导错误
- android - 我应该如何将 json 保存到我的外部存储中？
- selenium - 鼠标悬停在 IE11 和 Firefox 中无法正常工作
- swift - 在 CarPlay 中，如何使用自定义单元格为音频应用创建表格视图？
- solr - 如何在不同的服务器中复制 solr 分片