带有TabBarView和SliverFillRemaining的条带使底部溢出xxx像素
需要帮助解决像素溢出问题。
我目前正在使用， DefaultTabController -脚手架 -建筑商 -CustomScrollView（SliverList + SliverFillRemaining）
SliverFillRemaining小部件无法完全滚动，即使当我滚动到极限时，它的高度也仅等于屏幕高度。
相同的代码在这里。...
要引用的主要代码在build和_columnWithTabsAndTicketDetails函数中
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....
到目前为止我一直在尝试什么？
-
尝试在SingleChildScrollView-容器-TabBarView内添加TabBarView，但无效。
-
试图在TabView-TabBarView内添加TabBarView，但无效。
-
在每次单击Tab时都删除了TabBarView和setState，但是每次选定的选项卡都会重置为0。
1 个答案:
答案 0 :(得分：0)
如上面的注释中所述，当Tabs内容滚动时，您还需要TabBarView滚动。
在这种情况下，我将考虑使用NestedScrollView。检查此处以了解有关NestedScrollView的更多信息。
我以您的代码为例，添加了一个演示如何使用NestedScrollView的演示：
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
结果：
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？