带有TabBarView&的条子SliverFillRemaining使底部溢出xxx像素 [英] Sliver with TabBarView & SliverFillRemaining gives Bottom Overflowed by xxx pixels
本文介绍了带有TabBarView&的条子SliverFillRemaining使底部溢出xxx像素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
需要帮助解决像素溢出问题.
Need help for the Overflowing pixels issue.
我目前正在使用， DefaultTabController -脚手架 -建造者 -CustomScrollView(SliverList + SliverFillRemaining)
I am currently using a, DefaultTabController -- Scaffold -- Builder -- CustomScrollView (SliverList + SliverFillRemaining)
SliverFillRemaining小部件无法完全滚动，即使当我滚动到极限时，它的高度也仅等于屏幕高度.
SliverFillRemaining widget does not scroll full, it takes height equal to Screen height only, even when i scroll to the extreme.
相同的代码在这里......
Code for the same goes here....
要引用的主要代码在build&中. _columnWithTabsAndTicketDetails函数
Main code to refer is in build & _columnWithTabsAndTicketDetails function
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: ViewEditComplaintDetails(),
);
}
}
class ViewEditComplaintDetails extends StatefulWidget {
ViewEditComplaintDetails({Key key}) : super(key: key);
@override
_ViewEditComplaintDetailsState createState() =>
_ViewEditComplaintDetailsState();
}
class _ViewEditComplaintDetailsState extends State<ViewEditComplaintDetails> {
//UI variables goes below.....
Card _complaintPreviewCard;
//NON-UI variables goes below....
final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
BuildContext _scaffoldContext;
List<Widget> _productRelatedTabs;
@override
void initState() {
super.initState();
_complaintPreviewCard = _getComplaintPreviewCard();
TextStyle _textStyle = TextStyle(fontWeight: FontWeight.w600, fontSize: 12);
var complaintDetailsTab = Text('COMPLAINT\nDETAILS',
textAlign: TextAlign.center, style: _textStyle);
var contactDetailsTab = Text('CONTACT\nDETAILS',
textAlign: TextAlign.center, style: _textStyle);
var typeOfComplaintsTab = Text('TYPES OF\nCOMPLAINT',
textAlign: TextAlign.center, style: _textStyle);
var sampleDetailsTab =
Text('SAMPLE\nDETAILS', textAlign: TextAlign.center, style: _textStyle);
var equipAndAppliDetailsTab = Text('EQUIPMENT\nAPPLICATION DETAILS',
textAlign: TextAlign.center, style: _textStyle);
var uploadDocsTab = Text('UPLOADED\nDOCUMENTS',
textAlign: TextAlign.center, style: _textStyle);
var commentsTab =
Text('COMMENTS', textAlign: TextAlign.center, style: _textStyle);
_productRelatedTabs = List();
_productRelatedTabs.add(complaintDetailsTab);
_productRelatedTabs.add(contactDetailsTab);
_productRelatedTabs.add(typeOfComplaintsTab);
_productRelatedTabs.add(sampleDetailsTab);
_productRelatedTabs.add(equipAndAppliDetailsTab);
_productRelatedTabs.add(uploadDocsTab);
_productRelatedTabs.add(commentsTab);
}
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: _productRelatedTabs.length,
child: Scaffold(
// drawer: Drawer(child: NavigationDrawer()),
// key: _scaffoldKey,
// appBar: AppBarCustom(context, "View Detail", _navDrawerTap,
// addGulfLogoInAppBar: false)
// .getCustomAppBar(),
// bottomNavigationBar: AppBottomNavigationBar(context),
body: new Builder(builder: (BuildContext context) {
_scaffoldContext = context;
return _columnWithTabsAndTicketDetails();
})),
);
} //build closes here....
_columnWithTabsAndTicketDetails() {
SliverList _sliverList = SliverList(
delegate: SliverChildListDelegate(
[
//Expanded(child: _getComplaintPreviewCard(), flex: 2),
_getComplaintPreviewCard(),
_getTabBar(),
// _getTabBarView()
// Expanded(child: _getTabBarView(), flex: 5)
],
),
);
SliverFillRemaining tabBarBottomView =
SliverFillRemaining(child: _getTabBarView());
Container finalContainerWithScrollView = Container(
child: CustomScrollView(
slivers: [
// Expanded(child: _sliverList, flex: 1),
// Expanded(child: tabBarBottomView, flex: 1)
_sliverList, tabBarBottomView
],
),
margin: EdgeInsets.fromLTRB(0, 10, 0, 10));
return finalContainerWithScrollView;
} //_columnWithTabsAndTicketDetails closes here....
_getComplaintPreviewCard() {
////////........1st row goes below.........\\\\\\\\\\
// Color ticketColor = _ticketActiveColor; //Initialization...
//TODO: Check the status of the ticket & change the color here...
_complaintPreviewCard = Card(
margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
// elevation: ELEVATION_APP,
child: ClipPath(
child: Container(
child: _getComplaintDetails(context),
decoration: BoxDecoration(
border: Border(left: BorderSide(color: Colors.green, width: 5))),
)),
);
return _complaintPreviewCard;
} //_getComplaintPreviewCard closes here....
_getComplaintDetails(BuildContext context) {
var margin = EdgeInsets.fromLTRB(10, 0, 5, 0);
return Container(
// margin: EdgeInsets.fromLTRB(10, 0, 5, 0),
padding: EdgeInsets.fromLTRB(0, 8, 0, 0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(child: _complaintDetailsTopRow(), margin: margin),
Container(child: _complaintDetailsBottomRow(), margin: margin),
_getImagesVideoAudioCountRow(),
],
));
} //_getComplaintDetails closes here....
_complaintDetailsTopRow() {
return Container(
child: Column(
// mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
//Complaint Title row goes below....
_getComplaintTitleRow(),
_getComplaintIDRow(),
],
),
);
} //_complaintDetailsTopRow closes here.....
_complaintDetailsBottomRow() {
return Container(
margin: EdgeInsets.only(top: 15),
child: Row(crossAxisAlignment: CrossAxisAlignment.start, children: [
Expanded(child: _getLeftAssignmentColumn(), flex: 4),
Container(width: 10),
Expanded(child: _getRightAssignmentColumn(), flex: 4),
]),
);
} //_complaintDetailsBottomRow closes here....
_getComplaintTitleRow() {
return Container(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Expanded(child: Icon(Icons.ac_unit), flex: 1),
Expanded(child: Text("Complaint Title"), flex: 15),
],
),
);
} //_getComplaintTitleRow closes here.....
_getComplaintIDRow() {
var complaintDate = "", complaintCode = "";
return Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// SmallestText("ID : GT12345", isBlack: true, bottomMargin: 10),
Expanded(child: Text("ID : $complaintCode"), flex: 3),
Container(
margin: EdgeInsets.fromLTRB(5, 0, 5, 10),
height: 15,
width: 1,
color: Colors.green),
Expanded(
child: Text("Created on : ${complaintDate}"),
flex: 3,
),
// Expanded(child: ticketStatusText, flex: 2),
Container(width: 5) //Adding right margin...
],
);
} //_getComplaintIDRow closes here....
_getLeftAssignmentColumn() {
var complaintDate = "", complaintAssignedTo = "";
return Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Assign to : $complaintAssignedTo"),
Text("Assign on : $complaintDate"),
],
),
);
} //_getLeftAssignmentColumn closes here....
_getRightAssignmentColumn() {
String regionName = "", status = "";
return Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Zone $regionName"),
Text("Status : $status"),
],
),
);
} //_getRightAssignmentColumn closes here....
_getImagesVideoAudioCountRow() {
return Container(
padding: EdgeInsets.fromLTRB(0, 5, 0, 5),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
child:
Container(color: Colors.green, child: Icon(Icons.ac_unit)),
flex: 1),
Container(width: 1, height: 45, color: Colors.red),
Expanded(child: Container(child: Icon(Icons.ac_unit)), flex: 1),
Container(width: 1, height: 45, color: Colors.red),
Expanded(child: Container(child: Icon(Icons.ac_unit)), flex: 1),
],
));
} //_getImagesVideoAudioCountRow closes here....
_getTabBar() {
var tabControllerAppBar = new SizedBox(
height: 50,
child: new Container(
height: 50,
color: Colors.green,
child: new SafeArea(
child: new TabBar(isScrollable: true, tabs: _productRelatedTabs),
),
),
);
return tabControllerAppBar;
} //_getTabBar closes here.....
_getTabBarView() {
var tabControllerBody = TabBarView(children: [
Container(
margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("1"),
TextFormField(),
// Container(height: 15),
Text("2"),
TextFormField(),
Text("3"),
TextFormField(),
Text("4"),
TextFormField(),
Text("5"),
TextFormField(),
Text("6"),
TextFormField(),
Text("7"),
TextFormField(),
Text("8"),
TextFormField(),
Text("9"),
TextFormField(),
Text("10"),
TextFormField(),
Text("11"),
TextFormField(),
Text("12"),
TextFormField(),
],
)),
// new Column(
// children: <Widget>[new Text("Cart Page")],
// ),
// Container(
// margin:
// EdgeInsets.fromLTRB(_standard10Margin, 0, _standard10Margin, 0),
// child: ContactDetailsContainer(this, _complaintType,
// prefilledPackageDetails: null, prefilledProductDetails: null)),
new Column(
children: <Widget>[new Text("Cart Page")],
),
new Column(
children: <Widget>[new Text("Cart Page")],
),
new Column(
children: <Widget>[new Text("Lunches Page")],
),
new Column(
children: <Widget>[new Text("Lunches Page")],
),
new Column(
children: <Widget>[new Text("Lunches Page")],
),
new Column(
children: <Widget>[new Text("Lunches Page")],
),
]);
return tabControllerBody;
} //_getTabBarView closes here.....
} //_ViewEditComplaintDetailsState closes here....
到目前为止我一直在尝试什么?
What have i tried till now ?
-
到目前为止，我已经提到以下内容: https://stackoverflow.com/a/63305024/2975475
试图在SingleChildScrollView-容器-TabBarView内添加TabBarView，但是没有用.
Tried adding TabBarView inside SingleChildScrollView - Container - TabBarView but did not work.
试图在TabView-TabBarView内添加TabBarView，但无效.
Tried adding TabBarView inside ListView - TabBarView but did not work.
删除了TabBarView&每次单击Tab时都会设置setState，但是每次选定的选项卡都会重置为0.
Removed TabBarView & setState on every Tab click, but then the selected tab resets to 0, everytime.
推荐答案
如上面的注释所述，滚动TabBarView内容时，还需要Tabs进行滚动.
As mentioned in the comments above, you also need the Tabs to scroll when the TabBarView content is scrolled.
在这种情况下，我将考虑使用NestedScrollView.检查此处以了解有关 NestedScrollView 的更多信息.
I'll consider using a NestedScrollView in this scenario. Check here to read more about the NestedScrollView.
我以您的代码为例，添加了一个演示如何使用NestedScrollView的演示:
I added a demo of how to use the NestedScrollView using your code as an example:
class ViewEditComplaintDetails extends StatefulWidget {
ViewEditComplaintDetails({Key key}) : super(key: key);
@override
_ViewEditComplaintDetailsState createState() =>
_ViewEditComplaintDetailsState();
}
class _ViewEditComplaintDetailsState extends State<ViewEditComplaintDetails> {
//UI variables goes below.....
Card _complaintPreviewCard;
//NON-UI variables goes below....
final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
BuildContext _scaffoldContext;
List<Widget> _productRelatedTabs;
@override
void initState() {
super.initState();
_complaintPreviewCard = _getComplaintPreviewCard();
TextStyle _textStyle = TextStyle(fontWeight: FontWeight.w600, fontSize: 12);
var complaintDetailsTab = Text('COMPLAINT\nDETAILS',
textAlign: TextAlign.center, style: _textStyle);
var contactDetailsTab = Text('CONTACT\nDETAILS',
textAlign: TextAlign.center, style: _textStyle);
var typeOfComplaintsTab = Text('TYPES OF\nCOMPLAINT',
textAlign: TextAlign.center, style: _textStyle);
var sampleDetailsTab =
Text('SAMPLE\nDETAILS', textAlign: TextAlign.center, style: _textStyle);
var equipAndAppliDetailsTab = Text('EQUIPMENT\nAPPLICATION DETAILS',
textAlign: TextAlign.center, style: _textStyle);
var uploadDocsTab = Text('UPLOADED\nDOCUMENTS',
textAlign: TextAlign.center, style: _textStyle);
var commentsTab =
Text('COMMENTS', textAlign: TextAlign.center, style: _textStyle);
_productRelatedTabs = List();
_productRelatedTabs.add(complaintDetailsTab);
_productRelatedTabs.add(contactDetailsTab);
_productRelatedTabs.add(typeOfComplaintsTab);
_productRelatedTabs.add(sampleDetailsTab);
_productRelatedTabs.add(equipAndAppliDetailsTab);
_productRelatedTabs.add(uploadDocsTab);
_productRelatedTabs.add(commentsTab);
}
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: _productRelatedTabs.length,
child: Scaffold(
// drawer: Drawer(child: NavigationDrawer()),
// key: _scaffoldKey,
// appBar: AppBarCustom(context, "View Detail", _navDrawerTap,
// addGulfLogoInAppBar: false)
// .getCustomAppBar(),
// bottomNavigationBar: AppBottomNavigationBar(context),
body: new Builder(builder: (BuildContext context) {
_scaffoldContext = context;
return NestedScrollView(
headerSliverBuilder: (context, value) {
return [
// header
SliverList(
delegate: SliverChildListDelegate(
[
//Expanded(child: _getComplaintPreviewCard(), flex: 2),
_getComplaintPreviewCard(),
_getTabBar(),
// _getTabBarView()
// Expanded(child: _getTabBarView(), flex: 5)
],
),
),
];
},
// tab bar view
body: _getTabBarView(),
);
})),
);
} //build closes here....
_getComplaintPreviewCard() {
////////........1st row goes below.........\\\\\\\\\\
// Color ticketColor = _ticketActiveColor; //Initialization...
//TODO: Check the status of the ticket & change the color here...
_complaintPreviewCard = Card(
margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
// elevation: ELEVATION_APP,
child: ClipPath(
child: Container(
child: _getComplaintDetails(context),
decoration: BoxDecoration(
border: Border(left: BorderSide(color: Colors.green, width: 5))),
)),
);
return _complaintPreviewCard;
} //_getComplaintPreviewCard closes here....
_getComplaintDetails(BuildContext context) {
var margin = EdgeInsets.fromLTRB(10, 0, 5, 0);
return Container(
// margin: EdgeInsets.fromLTRB(10, 0, 5, 0),
padding: EdgeInsets.fromLTRB(0, 8, 0, 0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(child: _complaintDetailsTopRow(), margin: margin),
Container(child: _complaintDetailsBottomRow(), margin: margin),
_getImagesVideoAudioCountRow(),
],
));
} //_getComplaintDetails closes here....
_complaintDetailsTopRow() {
return Container(
child: Column(
// mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
//Complaint Title row goes below....
_getComplaintTitleRow(),
_getComplaintIDRow(),
],
),
);
} //_complaintDetailsTopRow closes here.....
_complaintDetailsBottomRow() {
return Container(
margin: EdgeInsets.only(top: 15),
child: Row(crossAxisAlignment: CrossAxisAlignment.start, children: [
Expanded(child: _getLeftAssignmentColumn(), flex: 4),
Container(width: 10),
Expanded(child: _getRightAssignmentColumn(), flex: 4),
]),
);
} //_complaintDetailsBottomRow closes here....
_getComplaintTitleRow() {
return Container(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Expanded(child: Icon(Icons.ac_unit), flex: 1),
Expanded(child: Text("Complaint Title"), flex: 15),
],
),
);
} //_getComplaintTitleRow closes here.....
_getComplaintIDRow() {
var complaintDate = "", complaintCode = "";
return Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// SmallestText("ID : GT12345", isBlack: true, bottomMargin: 10),
Expanded(child: Text("ID : $complaintCode"), flex: 3),
Container(
margin: EdgeInsets.fromLTRB(5, 0, 5, 10),
height: 15,
width: 1,
color: Colors.green),
Expanded(
child: Text("Created on : ${complaintDate}"),
flex: 3,
),
// Expanded(child: ticketStatusText, flex: 2),
Container(width: 5) //Adding right margin...
],
);
} //_getComplaintIDRow closes here....
_getLeftAssignmentColumn() {
var complaintDate = "", complaintAssignedTo = "";
return Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Assign to : $complaintAssignedTo"),
Text("Assign on : $complaintDate"),
],
),
);
} //_getLeftAssignmentColumn closes here....
_getRightAssignmentColumn() {
String regionName = "", status = "";
return Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Zone $regionName"),
Text("Status : $status"),
],
),
);
} //_getRightAssignmentColumn closes here....
_getImagesVideoAudioCountRow() {
return Container(
padding: EdgeInsets.fromLTRB(0, 5, 0, 5),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
child:
Container(color: Colors.green, child: Icon(Icons.ac_unit)),
flex: 1),
Container(width: 1, height: 45, color: Colors.red),
Expanded(child: Container(child: Icon(Icons.ac_unit)), flex: 1),
Container(width: 1, height: 45, color: Colors.red),
Expanded(child: Container(child: Icon(Icons.ac_unit)), flex: 1),
],
));
} //_getImagesVideoAudioCountRow closes here....
_getTabBar() {
var tabControllerAppBar = new SizedBox(
height: 50,
child: new Container(
height: 50,
color: Colors.green,
child: new SafeArea(
child: new TabBar(isScrollable: true, tabs: _productRelatedTabs),
),
),
);
return tabControllerAppBar;
} //_getTabBar closes here.....
_getTabBarView() {
var tabControllerBody = TabBarView(children: [
Container(
margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("1"),
TextFormField(),
// Container(height: 15),
Text("2"),
TextFormField(),
Text("3"),
TextFormField(),
Text("4"),
TextFormField(),
Text("5"),
TextFormField(),
Text("6"),
TextFormField(),
Text("7"),
TextFormField(),
Text("8"),
TextFormField(),
Text("9"),
TextFormField(),
Text("10"),
TextFormField(),
Text("11"),
TextFormField(),
Text("12"),
TextFormField(),
],
),
)),
// new Column(
// children: <Widget>[new Text("Cart Page")],
// ),
// Container(
// margin:
// EdgeInsets.fromLTRB(_standard10Margin, 0, _standard10Margin, 0),
// child: ContactDetailsContainer(this, _complaintType,
// prefilledPackageDetails: null, prefilledProductDetails: null)),
new Column(
children: <Widget>[new Text("Cart Page")],
),
new Column(
children: <Widget>[new Text("Cart Page")],
),
new Column(
children: <Widget>[new Text("Lunches Page")],
),
new Column(
children: <Widget>[new Text("Lunches Page")],
),
new Column(
children: <Widget>[new Text("Lunches Page")],
),
new Column(
children: <Widget>[new Text("Lunches Page")],
),
]);
return tabControllerBody;
} //_getTabBarView closes here.....
} //_ViewEditComplaintDetai
结果:
这篇关于带有TabBarView&的条子SliverFillRemaining使底部溢出xxx像素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
