flutter - Flutter - 使包含 DefaultTabController 的页面可滚动
问题描述
我正在开发一个应用程序,我有一个页面,其中显示了一个数据块,在该页面下方显示了包含附加数据的 tabBars 和 TabBarView。我正在努力解决的问题是,如果我尝试用“SingleChildScrollView”包装小部件“DefaultTabController”,它会引发错误并且页面不起作用。
我需要找到一种方法在页面底部显示 tabBars 和 TabBarView 并使整个页面可滚动
我把代码:
在构建方法中,我在列内放置了 4 个小部件
- _showEventHeader 显示带有标题的单个图像
- _showUserAndEventData 显示纯文本
- _showTabs 显示选项卡标题
- _showTabsContent 显示选项卡的内容(图像和评论)
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
child: Scaffold(
backgroundColor: Theme.of(context).primaryColor,
body: Column(
children: [
..._showEventHeader(),
Container(
padding: EdgeInsets.all(15),
child: _showUserAndEventData()),
_showTabs(),
_showTabsContent(),
],
)
));
}
List<Widget> _showEventHeader() {
return [
SizedBox(
height: 20,
),
GestureDetector(
onTap: () {
if (Val.valStr(widget.evento.bannerUrl).isNotEmpty) {
Navigator.of(context).push(MaterialPageRoute(builder: (ctx) {
return FlypperFullImage(
imgURL: widget.evento.bannerUrl,
);
}));
}
},
child: Stack(
alignment: Alignment.bottomRight,
children: [
FlypperCustomImageNetWork(
imageURL: widget.evento.bannerUrl,
height: 200,
width: 200,
showAsRectangle: true,
fillWidth: true,
),
Container(
child: FlypperQrImage(
qrData: widget.evento.code,
size: 65,
),
)
],
),
),
SizedBox(
height: 20,
),
!_ticketsAvailable
? Text('$_noTicketAvailableMessage',
style: Theme.of(context).textTheme.headline2)
: SizedBox(
height: 1,
),
Card(
color: Theme.of(context).primaryColor,
elevation: 5,
child: Padding(
padding: const EdgeInsets.all(5),
child: Text(
Val.valStr(widget.evento.name).isNotEmpty
? Val.valStr(widget.evento.name)
: 'Sin nombre',
textAlign: TextAlign.justify,
style: Theme.of(context)
.textTheme
.headline1 /*FlypperStyleHelper.eventTitle(context)*/),
),
),
SizedBox(
height: 10,
),
];
}
Widget _showUserAndEventData() {
return SingleChildScrollView(
child: Container(
color: Theme.of(context).primaryColor,
child: Column(
children: [
SizedBox(height: 10),
Row(mainAxisAlignment: MainAxisAlignment.start, children: [
this.user != null
? /*FlypperCustomImageBase64(
imageBase64: this.user.profileImageUrl)*/
FlypperCustomImageNetWork(
imageURL: this.user.profileImageUrl,
keepImageCached: true,
height: 65,
width: 65,
)
: SizedBox(height: 1),
SizedBox(
height: 10,
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
this.user != null
? this.user.userName.isEmpty
? this.user.email
: this.user.userName
: '',
style: Theme.of(context).textTheme.headline1,
/* FlypperStyleHelper.eventUserData(context, 18),*/
),
Text(
this.user != null
? Val.valInt(this.user.followers).toString() +
' seguidores'
: '',
style: Theme.of(context).textTheme.bodyText1
/*FlypperStyleHelper.eventUserData(context, 15),*/
)
],
),
)
]),
_getEventDetailInfo(),
SizedBox(
height: 20,
),
_showBuyButton(),
SizedBox(
height: 10,
),
FlypperIconButton(
icon: Icons.location_on,
width: 150,
handlerFunction: () => _openMapWithCalculatedRoute(context),
),
Divider(
color: Colors.grey,
thickness: 2,
)
],
),
),
);
}
Widget _showTabs() {
return TabBar(
isScrollable: true,
labelStyle: Theme.of(context).textTheme.headline2,
tabs: [
Tab(
text: 'Fotos, videos...',
/*icon: Icon(Icons.event, color: Theme.of(context).buttonColor)*/
),
Tab(
text: 'Comentarios',
/*icon: Icon(Icons.attach_file, color: Theme.of(context).buttonColor),*/
),
],
);
}
Widget _showTabsContent() {
return Flexible(
child: TabBarView(
children: [
SingleChildScrollView(
child: Column(
children: [
Container(
color: Theme.of(context).primaryColor,
child: Column(children: [_getDetailImage()]),
),
],
),
),
Container(child: Text('Comments section')) //comentarios, pendiente
// SingleChildScrollView(
// child: Container(
// color: Theme.of(context).primaryColor,
// child: Column(children: [_getDetailImage()]),
// ),
// ),
// Container(child: Text('Comments section')) //comentarios, pendiente
],
),
);
}
我还附上了截图,以便您更好地理解我在说什么
解决方案
试试这个我有一个例子并编辑它一些值: -
标签栏(
isScrollable:真,
unselectedLabelColor: Colors.white.withOpacity(0.3),
指示器颜色:Colors.white,
tabs: [
Tab(
child: Text('Tab 1'),
),
Tab(
child: Text('Investment'),
),
Tab(
child: Text('Your Earning'),
),
]),
列表视图中的所有 Widget vale 调用如下所示:-
_showEventHeader() {
返回新容器(
height: 20,
child: ListView(
shrinkWrap: true,
scrollDirection: Axis.vertical,
Column(
children: [])));}
推荐阅读
- python-3.6 - 没有使用 django3 命名为“编码”的模块
- java - 如何创建一个类以在单击图像按钮时显示一次吐司消息?
- python - 在给定无序输入和相应 ID 的情况下设置元素的 Numpy-thonic 方法
- db2 - SQL Developer 中的 DB2 数据建模
- sql - 在预言机中计算百分比
- reactjs - 如何在 React Native 项目中手动安装包?
- javascript - 对计算结果感到困惑
- group-by - 按上次更新日期分组时映射到更新记录的用户 ID
- html - 为什么去掉边框后这个 div 会变高?
- c# - 当可视化的对象位于另一个程序集中时,调试可视化器将无法在测试中工作