如何解决Flutter Card 高度不随其子内容而变化
class VerticalProductItemWidget extends StatelessWidget {
final ProductModel product;
const VerticalProductItemWidget({Key key,this.product}) :
super(key: key);
@override
Widget build(BuildContext context) {
final screenHeight = MediaQuery.of(context).size.height;
return GestureDetector(
这里我的卡片从一些装饰开始 即使我更改图片大小,它也会被一些像素溢出。 孩子:填充( 填充:const EdgeInsets.all(8.0),
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),),color: Color(0xFFFCFCFC),child: Container(
// padding: const EdgeInsets.all(10),// color: productt.backgroundColor,child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 10.0),child: Hero(
tag: product.imagepath.toString(),child: FadeInImage.assetNetwork(
placeholder:
'assets/images/image_placeholder.png',image: product.imagepath.toString(),height: 100,))),Text(
product.productname,style: TextStyle(
fontWeight: FontWeight.w400,color: Color(0xFF3B3B43),fontSize: 16),Divider(
height: 4,indent: 10,endindent: 10,Row(
mainAxisAlignment: MainAxisAlignment.center,children: [
Text(
'Rs: ',style: TextStyle(
fontWeight: FontWeight.w400,color: Color(0xFF050405),fontSize: 14),Text(
product.saleprice.toString(),Text(
'.00',color: Color(0x703B3B43),fontSize: 8),],elevation: 5,[![enter image description here][1]][1] );
}
}
最终结果在这里作为屏幕图像。 有没有人遇到同样的问题 任何解决方案请
解决方法
也许可以尝试用 SingleChildScrollView 包装 Column 小部件。
,尝试用容器包装您的文本小部件(使用您的产品名称)。也许这会奏效
,您还可以使用 stack 小部件替换列并将图像包装在容器中。
,扩展( 孩子:文本( "product.saleprice.toString()",样式:文本样式( fontWeight: FontWeight.w400,颜色:颜色(0xFF3B3B43), 字体大小:14)),)
,Widget getData(image1,image2,n1,n2,rat1,rat2,p1,p2){
return Expanded(
child: Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,children: [
SizedBox(width: 15,),Expanded(
child: Container(
margin: EdgeInsets.only(top: 20),child: Stack(
children: [
Container(
height: 200,decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),image: DecorationImage(
image: AssetImage(image1),fit: BoxFit.cover
),alignment: Alignment.bottomCenter,child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(20),bottomRight: Radius.circular(20)),color: Colors.black.withOpacity(0.4),height: 40,child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,children: [
Container(
margin: EdgeInsets.only(
left: 5,right: 5,child: Text(
'$n1',style: TextStyle(color: Colors.white,letterSpacing: 1),Text('$p1',],Container(
padding: EdgeInsets.only(left: 10),height: 25,width: 60,decoration: BoxDecoration(
color: Colors.green,borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),bottomRight: Radius.circular(4)),child: Center(
child: Row(
children: [
Text('$rat1',style: TextStyle(color: Colors.white),Icon(Icons.star,color: Colors.white,)
],flex: 1,SizedBox(width: 15,image: DecorationImage(
image: AssetImage(image2),child: Text(
'$n2',Text('$p2',child: Center(
child: Row(
children: [
Text('$rat2',);
}
void main() {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.white,systemNavigationBarColor: Colors.white,//statusBarBrightness: Brightness.light,statusBarIconBrightness: Brightness.dark,systemNavigationBarIconBrightness: Brightness.dark,));
[![Fashion Image][1]][1]
runApp(
MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text(
'SHOPPING GALLERY UI',style:
TextStyle(letterSpacing: 2,color: Colors.black,fontSize: 20),centerTitle: true,backgroundColor: Colors.white,brightness: Brightness.light,body: SingleChildScrollView(
child: Container(
height: 1200,child: Stack(
children: [
Container(
width: double.infinity,height: double.infinity,decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Color(0xff357cea),Color(0xff4c53ea),Color(0xff9c2bdd),Color(0xffca02e5),begin: Alignment.topCenter,end: Alignment.bottomCenter,Container(
margin: EdgeInsets.only(bottom: 20),child: Column(
children: [
getData('assets/images/shoes.png','assets/images/tshirt.jpg','SHOES','TSHIRT','5.0','4.1','\$30.33 ','\$52.00 '),getData('assets/images/gtop.jpg','assets/images/blazer.jpg','TOP','BLAZER','4.9','4.2','\$40.00 ','\$99.99 '),getData('assets/images/hoodie.jpg','assets/images/jeans.jpg','HODIE','JEANS','4.7','4.5','\$70.00 ','\$72.30 '),getData('assets/images/combo.jpg','assets/images/jacket.jpg','COMBO','JACKET','4.8','\$56.27 ','\$60.90 '),getData('assets/images/shrug.jpg','assets/images/hot.jpg','SHRUG','HOT WEAR','\$90.99 ','\$54.90 '),getData('assets/images/watch.jpg','assets/images/shirt.jpg','WATCH','SHIRT','4.3','4.0','\$99.99 ','\$25.33 '),debugShowCheckedModeBanner: false,);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。