Flutter实现单张垂直卡片与两组堆叠卡片等高并适配小屏
Flutter 卡片布局适配需求及问题
需求说明:
- 左侧单张垂直卡片的高度,与右侧两组(每组包含两张垂直堆叠卡片)的总高度相等
- 右侧每组内的两张卡片高度保持一致
遇到的问题:
使用IntrinsicHeight组件在部分屏幕尺寸下能达成预期布局,但在小屏设备中会出现文本溢出的情况。
当前实现代码:
@override Widget build(BuildContext context) { return IntrinsicHeight( child: Row( crossAxisAlignment: CrossAxisAlignment.stretch, //dikey kart aşağı doğru çeksin diye children: [ // Dikey Kart Expanded( flex: 1, child: FadeInRight( child: Container( padding: const EdgeInsets.all(5), child: Card( elevation: 4, child: Card( child: DottedBorder( radius: Radius.circular(10), borderType: BorderType.RRect, dashPattern: [3, 2], strokeWidth: 1.5, color: cayirblue, child: Center( child: Column( crossAxisAlignment: CrossAxisAlignment.center, mainAxisSize: MainAxisSize.min, children: [ AspectRatio( aspectRatio: 1.5, // İkonun kare olmasını sağlar child: SvgPicture.asset( "assets/images/icons/odeme.svg", colorFilter: ColorFilter.mode( cayirblue, BlendMode.srcIn), fit: BoxFit.contain, ), ), Container( alignment: Alignment.center, padding: const EdgeInsets.only(top: 10, bottom: 5), child: Text( "Belediye'ye ait borçlarınızı ödemek için tıklayınız", textAlign: TextAlign.center, style: TextStyle( fontSize: 10, color: cayirblue, fontWeight: FontWeight.bold), ), ), ], ), ), ), ), ), ), ), ), // İki Sütun Kartlar Expanded( flex: 1, child: IntrinsicHeight( child: Column( children: [ // İlk Kart nöbetçi eczane FadeInLeft( child: Container( padding: EdgeInsets.all(5), child: Card( child: Card( child: DottedBorder( radius: Radius.circular(10), borderType: BorderType.RRect, dashPattern: [3, 2], strokeWidth: 1.5, color: cayirblue, child: Container( padding: EdgeInsets.only(top: 5), child: Column( children: [ AspectRatio( aspectRatio: aspectRatio, child: SvgPicture.asset( "assets/images/icons/eczane.svg", colorFilter: ColorFilter.mode( cayirblue, BlendMode.srcIn), fit: BoxFit.contain, ), ), Padding( padding: const EdgeInsets.only( top: 10, bottom: 5), child: FittedBox( child: Text( "Nöbetçi Eczaneler", textAlign: TextAlign.center, style: TextStyle( fontSize: 10, color: cayirblue, fontWeight: FontWeight.bold), ), ), ), ], ), ), ), ), ), ), ), // İkinci Kart E-Kent FadeInLeft( child: Container( padding: EdgeInsets.all(5), child: Card( child: Card( child: DottedBorder( radius: Radius.circular(10), borderType: BorderType.RRect, dashPattern: [3, 2], strokeWidth: 1.5, color: cayirblue, child: Container( padding: EdgeInsets.only(top: 5), child: Column( children: [ AspectRatio( aspectRatio: aspectRatio, child: SvgPicture.asset( "assets/images/icons/kent.svg", colorFilter: ColorFilter.mode( cayirblue, BlendMode.srcIn), fit: BoxFit.contain, ), ), Padding( padding: const EdgeInsets.only( top: 10, bottom: 5), child: Text( "E-Kent", textAlign: TextAlign.center, style: TextStyle( fontSize: 10, color: cayirblue, fontWeight: FontWeight.bold), ), ), ], ), ), ), ), ), ), ), ], ), ), ), Expanded( flex: 1, child: Column( children: [ // Üçüncü Kart E-İmar FadeInRight( child: Container( padding: EdgeInsets.all(5), child: Card( child: Card( child: DottedBorder( radius: Radius.circular(10), borderType: BorderType.RRect, dashPattern: [3, 2], strokeWidth: 1.5, color: cayirblue, child: Container( padding: EdgeInsets.only(top: 5), child: Column( children: [ AspectRatio( aspectRatio: aspectRatio, child: SvgPicture.asset( "assets/images/icons/imar.svg", colorFilter: ColorFilter.mode( cayirblue, BlendMode.srcIn), fit: BoxFit.contain, ), ), Padding( padding: const EdgeInsets.only(top: 10, bottom: 3), child: Text( "E-İmar", textAlign: TextAlign.center, style: TextStyle( fontSize: 10, color: cayirblue, fontWeight: FontWeight.bold), ), ), ], ), ), ), ), ), ), ), // Dördüncü Kart Beyan ve Takip FadeInRight( child: Container( padding: EdgeInsets.all(5), child: Card( child: Card( child: DottedBorder( radius: Radius.circular(10), borderType: BorderType.RRect, dashPattern: [3, 2], strokeWidth: 1.5, color: cayirblue, child: Container( padding: EdgeInsets.only(top: 5), child: Column( children: [ AspectRatio( aspectRatio: aspectRatio, child: SvgPicture.asset( "assets/images/icons/beyan.svg", colorFilter: ColorFilter.mode( cayirblue, BlendMode.srcIn), fit: BoxFit.contain, ), ), Padding( padding: const EdgeInsets.only(top: 10, bottom: 7), child: Text( "Beyan ve Takip", textAlign: TextAlign.center, style: TextStyle( fontSize: 10, color: cayirblue, fontWeight: FontWeight.bold), ), ), ], ), ), ), ), ), ), ), ], ), ), ], ), ); }
内容的提问来源于stack exchange,提问作者enes durmuş
相关产品推荐
相关产品推荐

