[英]A RenderFlex overflowed Flutter
嘗試將 Positioned 與 Stack 和 Column 一起使用,出現錯誤:
“一個 RenderFlex 在底部溢出了 72 個像素。”
“一個 RenderFlex 在底部溢出了 46 個像素。” ETC...
我的塊的一部分剛剛消失在 slider 中,我嘗試只使用 Stacked 和幾個 Positioned 壓到圖片底部,但隨后部分圖片被關閉。
我的 dart:
final List<Widget> imageSliders = imgList.map((item) => Container(
child: Container(
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(30.0)),
child: Stack(
children: <Widget>[
Container(
alignment: Alignment.bottomCenter,
decoration: BoxDecoration(color: Colors.white),
child: Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Image.asset('assets/psplus-1month.png', fit: BoxFit.cover, width: 1000.0),
Container(
decoration: BoxDecoration(color: Colors.white),
padding: EdgeInsets.only(top: 20.0),
child: Text(
'Playstation Plus',
textAlign: TextAlign.center,
style: TextStyle(
color: const Color(0xFF4F4F4F),
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
),
Container(
decoration: BoxDecoration(color: Colors.white),
padding: EdgeInsets.only(bottom: 5.0, top:5.0),
child: Text(
'1 месяц',
textAlign: TextAlign.center,
style: TextStyle(
color: const Color(0xFFA5ABC8),
fontSize: 12,
),
),
),
Container(
decoration: BoxDecoration(color: Colors.white),
padding: EdgeInsets.only(bottom: 10.0),
child: Text(
'1 500 рублей',
textAlign: TextAlign.center,
style: TextStyle(
color: const Color(0xFF789EEB),
fontSize: 16,
fontWeight: FontWeight.w600,
),
),
)
],
),
),
Positioned(
bottom: 35.0,
left: 0.0,
right: 0.0,
child: Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
boxShadow: [BoxShadow(blurRadius: 10, color: Colors.black.withOpacity(0.10), spreadRadius: 5)],
),
child: CircleAvatar(
backgroundColor: Colors.white,
radius: 15,
child: Icon(Icons.add),
),
)
],
),
),
],
)
),
),
)).toList();
CarouselSlider(
options: CarouselOptions(
autoPlay: false,
aspectRatio: 2.0,
enlargeCenterPage: true,
viewportFraction: 0.6,
),
items: imageSliders,
)
如果我明白你的意思,我建議你使用LayoutBuilder
小部件來獲取CarouselSlider
父小部件的約束。
Output
完整代碼
class MyHomePage extends StatefulWidget {
final Function onItemPressed;
MyHomePage({
Key key,
this.onItemPressed,
}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List<String> imgList = [
'assets/veg.png',
'assets/veg.png',
'assets/veg.png',
'assets/veg.png',
];
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue,
body: Padding(
padding: const EdgeInsets.only(top: 50),
child: CarouselSlider(
options: CarouselOptions(
autoPlay: false,
enlargeCenterPage: true,
aspectRatio: 16 / 10,
viewportFraction: 0.6,
),
items: imgList
.map(
(item) => LayoutBuilder(
builder: (context, constraints) {
return ClipRRect(
borderRadius: BorderRadius.all(
Radius.circular(20.0),
),
child: Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(
Radius.circular(20.0),
),
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Image.asset(
'$item',
fit: BoxFit.cover,
width: constraints.maxWidth,
height: constraints.maxHeight / 2,
),
SizedBox(height: 23),
Text(
'Playstation Plus',
textAlign: TextAlign.center,
style: TextStyle(
color: const Color(0xFF4F4F4F),
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 5),
Text(
'1 месяц',
style: TextStyle(
color: const Color(0xFFA5ABC8),
fontSize: 12,
),
),
SizedBox(height: 5),
Text(
'1 500 рублей',
style: TextStyle(
color: const Color(0xFF789EEB),
fontSize: 16,
fontWeight: FontWeight.w600,
),
),
SizedBox(height: 5),
],
),
),
Positioned(
bottom: constraints.maxHeight / 2 - 18,
left: 0.0,
right: 0.0,
child: Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Colors.green,
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
blurRadius: 7,
color: Colors.black.withOpacity(0.10),
spreadRadius: 2)
],
),
child: CircleAvatar(
backgroundColor: Colors.white,
radius: 18,
child: Icon(Icons.add),
),
)
],
),
),
],
),
);
},
),
)
.toList(),
),
),
);
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.