我正在嘗試制作標題（圖片中的卡片一半在圖片內，一半在圖片外，并且它在堆疊中作業。
但是當我必須在下面制作許多容器時，我遇到了麻煩，所以當在堆疊下方添加時，我的底部溢位了。
我從代碼中洗掉了不必要的代碼，以便您可以在編輯器中對其進行測驗以獲取幫助:)
任何人都可以幫助我？？
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,
)
],
)
)
),
)
]
)
);
}
}
uj5u.com熱心網友回復：
用SingleChildScrollView小部件樹包裹您的列，就像
Scaffold
-SingleChildScrollView
- Column
uj5u.com熱心網友回復：
使用SingleChildScrollView滾動頁面。
SingleChildScrollView 需要一個滾動控制器來改變你的代碼如下
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(
------------------------------
),
),
),
);
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/402063.html
標籤：扑