[英]bottom overflowed by 1000 pixels
我正在尝试制作 header (图片中有一张卡片一半在图片里面,一半在外面,它在堆栈中工作。
但是当我必须在下面制作许多容器时,我遇到了麻烦,所以当在堆栈下方添加时,我的底部溢出了。
我从代码中删除了不必要的代码,因此您可以在编辑器中对其进行测试以寻求帮助:)
任何人都可以帮助我??
import 'package:flutter/material.dart';
class ServiceDetails extends StatefulWidget {
@override
_ServiceDetails createState() => _ServiceDetails();
}
class _ServiceDetails extends State<ServiceDetails> {
@override
Widget build(BuildContext context) {
var h = MediaQuery.of(context).size.height;
var w = MediaQuery.of(context).size.width;
return Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Stack(
children:[
Column(
children:[
Container(
height: h * .4,
width: w,
// color: Colors.grey[50],
child: Image.asset('images/hairdresser1.jpg', fit: BoxFit.fitWidth,)
),
new Container(
height: h * .0,
color: Colors.grey[50],
)
]
),
Container(
alignment: Alignment.topCenter,
padding: new EdgeInsets.only(
top: MediaQuery.of(context).size.height * .33,
right: 15.0,
left: 15.0
),
child: Container(
height: 150,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
elevation: 0.0,
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: EdgeInsets.only(left: 20, bottom: 5, top: 20),
child: Text(
"Hair Dresser",
style: new TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold
)
)
),
Container(
padding: EdgeInsets.only(left: 20, bottom: 5),
child: Text(
"With our proffisional barbers, new experience is guaranteed",
style: new TextStyle(
color: Colors.grey,
fontSize: 13
)
)
),
],
)
)
)
),
],
)
),
Container(
padding: EdgeInsets.all(15),
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
elevation: 0.0,
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: EdgeInsets.only(left: 20, bottom: 5, top: 20),
child: Text(
"Frequently Used",
style: new TextStyle(
color: Colors.black,
fontSize: 15,
fontWeight: FontWeight.bold
)
)
),
Divider(),
Container(
padding: EdgeInsets.zero,
height: 210,
width: w,
)
],
)
)
),
Container(
padding: EdgeInsets.all(15),
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
elevation: 0.0,
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: EdgeInsets.only(left: 20, bottom: 5, top: 20),
child: Text(
"Frequently Used",
style: new TextStyle(
color: Colors.black,
fontSize: 15,
fontWeight: FontWeight.bold
)
)
),
Divider(),
Container(
padding: EdgeInsets.zero,
height: 210,
width: w,
)
],
)
)
),
)
]
)
);
}
}
用SingleChildScrollView
和小部件树包装你的列,就像
Scaffold
-SingleChildScrollView
- Column
使用SingleChildScrollView
来滚动页面。
SingleChildScrollView 需要滚动 controller 来更改您的代码如下
class _ServiceDetails extends State<ServiceDetails> {
ScrollController scrollController = ScrollController();
@override
Widget build(BuildContext context) {
var h = MediaQuery.of(context).size.height;
var w = MediaQuery.of(context).size.width;
return Scaffold(
body: Scrollbar(
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
controller: scrollController,
child: Column(
------------------------------
),
),
),
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.