flutter - 底部溢出 81 个像素
问题描述
我几乎是自学颤振，我正在做一个个人项目。我将它包装到 singlechildscrollview 但它仍然会产生问题。下面的代码：
class ScheduleDetail extends StatefulWidget {
var data;
ScheduleDetail(this.data);
@override
// ScheduleDetail({Key key, this.todos}) : super(key: key);
_ScheduleDetailState createState() => _ScheduleDetailState();
}
class _ScheduleDetailState extends State<ScheduleDetail>{
String foos = 'One';
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
ScreenUtil.instance =
ScreenUtil(width: 750, height: 1425, allowFontScaling: true)
..init(context);
return Scaffold(
extendBodyBehindAppBar: true,
appBar: AppBar(
// title: Text("String Master"),
title: SvgPicture.asset('assets/images/Logo_small.svg'),
centerTitle: true,
backgroundColor: Colors.transparent,
),
body: BackgroundImageWidget(
child: Center(
child: Container(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
height: ScreenUtil.getInstance().setHeight(150),
),
Container(
padding: EdgeInsets.symmetric(
horizontal: ScreenUtil.getInstance().setWidth(40),
),
child: Text(
AppStrings.scheduleTitle,
style: TextStyles.appName,
textAlign: TextAlign.center,
),
),
Container(
height: ScreenUtil.getInstance().setHeight(50),
),
SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(maxHeight: MediaQuery.of(context).size.height * 0.82),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Padding(
padding: EdgeInsets.symmetric(
horizontal: ScreenUtil.getInstance().setWidth(40),
),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
_buildTopCard(),
SizedBox(height: 10),
_buildTimeCard(),
SizedBox(height: 10),
ListTile(
title: Text(
"Calendar",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.green,
fontSize: 16
),
),
),
Container(color: Colors.grey, height: 1),
_buildNoticeExpansionTile(),
Container(color: Colors.grey, height: 1),
_buildMemoExpansionTile(),
],
)),
),
],
)
)
),
],
)),
)));
}
Widget _buildTopCard() {
return Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(7.0),
),
elevation: 15,
child: ClipPath(
clipper: ShapeBorderClipper(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(7.0))),
child: Stack(
children: <Widget>[
Container(
height: 150,
decoration: BoxDecoration(
border: Border(
top: BorderSide(color: Colors.green, width: 30)),
color: Colors.white,
),
alignment: Alignment.centerLeft,
child: Column(
children: <Widget>[
ListTile(
title: Text(widget.data['eventTitle'],
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.green,
),
),
subtitle: Text(
widget.data['location'],
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.grey.shade600
),
),
),
Container(
padding: EdgeInsets.only(left: 10, right: 10),
child:
Divider(color: Colors.grey),
),
Container(
padding: EdgeInsets.only(left: 10, right: 10),
child: Row (
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
widget.data['startDate'] + " " + widget.data['timeStart'],
style: TextStyle(
color: Colors.grey.shade600,
fontStyle: FontStyle.italic,
fontSize: 14
),
),
Spacer(flex: 2),
Text(
widget.data['startDate'] + " " + widget.data['timeEnd'],
style: TextStyle(
color: Colors.grey.shade600,
fontSize: 14,
fontStyle: FontStyle.italic,
),
),
]
)
),
],
)
),
Positioned(
left: 10,
top: 7,
width: 325,
child: Container(
padding: EdgeInsets.only(bottom: 10, left: 5, right: 5),
color: Colors.transparent,
child: Row (
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
widget.data['startDate'],
style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white, fontSize: 14),
),
Spacer(flex: 2),
Text(
widget.data['timeStart'],
style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white, fontSize: 14),
),
],
)
),
),
],
)
),
);
}
Widget _buildTimeCard() {
return Container(
height: 125,
width: 400,
margin: EdgeInsets.all(5.0),
decoration: BoxDecoration(
color: Colors.black,
border: Border.all(
color: Colors.green,
width: 0.5,
),
borderRadius: BorderRadius.circular(7.0),
),
child: Center(
child: Text(
'TIME OF EVENT',
style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white, fontSize: 14),
),
),
);
}
Widget _buildNoticeExpansionTile() {
return Theme(
data: Theme.of(context).copyWith(unselectedWidgetColor: Colors.white, accentColor: Colors.white),
child: ExpansionTile(
title: new Text(
"Notice",
style: TextStyle(
color: Colors.green,
fontSize: 16
),
),
backgroundColor: Colors.transparent,
children: <Widget>[
Container(
child: ListView.builder(
padding: EdgeInsets.all(0.0),
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: widget.data['notice'] != null ? widget.data['notice'].length : 0,
itemBuilder: (BuildContext context, int index){
return
Padding(
padding: EdgeInsets.only(left: 15, bottom: 10),
child: Text(
"\u2022 " + widget.data['notice'][index],
style: TextStyle(
color: Colors.white,
fontSize: 14
),
)
);
}
)
),
]
)
);
}
Widget _buildMemoExpansionTile() {
return
Theme(
data: Theme.of(context).copyWith(unselectedWidgetColor: Colors.white, accentColor: Colors.white),
child: ExpansionTile(
title: new Text(
"Memo",
style: TextStyle(
color: Colors.green,
fontSize: 16
),
),
backgroundColor: Colors.transparent,
children: <Widget>[
ListView.builder(
padding: EdgeInsets.all(0.0),
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: widget.data['memo'] != null ? widget.data['memo'].length : 0,
itemBuilder: (BuildContext context, int index){
return
Padding(
padding: EdgeInsets.only(left: 15, bottom: 10),
child: Text(
(index + 1).toString() + ". " + widget.data['memo'][index],
style: TextStyle(
color: Colors.white,
fontSize: 14
),
)
);
}
)
]
)
);
}
}
也许我的错误可能来自我使用过的那些对象之一。但是，即使我在互联网上搜索，我也无法弄清楚。我的意图是当可扩展磁贴与屏幕尺寸“重叠”时，您就可以一直向下滚动它。
解决方案
包装SingleChildScrollViewinExpanded小部件。
您可以使用颤振开发工具来识别重叠问题。
推荐阅读
- c# - 如何反序列化 TcpClient 对 json 的响应
- mysql - Mysql 触发错误：SQLSTATE[42000]：语法错误或访问冲突：1231 变量 'MESSAGE_TEXT' 不能设置为 'NULL' 的值
- string - 如何编写自己的函数来匹配字符串模式？
- javascript - 如何解决我遇到的 npm 安装问题
- tensorflow - TF 代理：如何在 ActorDistributionNetwork 的层中使用批量标准化
- wordpress - 如何在 wordpress 中翻译自定义分类法
- javascript - React 中的全局 beforeEach 和 afterEach Jest
- javascript - JavaScript如何在值更改时运行函数
- excel - 从 Excel 2013 转换为 2016 时出现 Excel VBA 自动化错误
- pine-script - Pine Script - 如何为某个价格点绘制形状/字符