什么是一个很好的策略来计算高度动态根据屏幕大小的设备,如果它配置了一个更大的字体.而不会遭受堆栈溢出。除此之外,我试图使所有的卡具有相同的高度。
即使我在几个设备上增加高度,也会出现堆栈溢出,当我在其他设备上增加它时,卡在其他设备上会非常高。
的数据
class AppSizeConfig {
late final double width;
late final double height;
late final double pixelRatio;
late final double blockVertical;
late final double blockHorizontal;
late final double safeAreaVertical;
late final double safeAreaHorizontal;
late final double safeAreaBlockVertical;
late final double safeAreaBlockHorizontal;
AppSizeConfig(BuildContext context) {
final data = MediaQuery.of(context);
width = data.size.width;
height = data.size.height;
pixelRatio = data.devicePixelRatio;
blockVertical = height / 100;
blockHorizontal = width / 100;
safeAreaVertical = data.padding.top + data.padding.bottom;
safeAreaHorizontal = data.padding.left + data.padding.right;
safeAreaBlockVertical = (height - safeAreaVertical) / 100;
safeAreaBlockHorizontal = (width - safeAreaHorizontal) / 100;
}
}
class _StoreCategoryListResults extends StatelessWidget {
final StoreCategory item;
const _StoreCategoryListResults(this.item, {super.key});
@override
Widget build(BuildContext context) {
final size = AppSizeConfig(context);
return SizedBox(
height: size.safeAreaBlockVertical * 30,
child: ListView.separated(
shrinkWrap: true,
itemCount: item.articles.length,
scrollDirection: Axis.horizontal,
separatorBuilder: (_, __) => const SizedBox(width: 7.0),
itemBuilder: (context, index) => _StoreCategoryListContentResult(item.articles[index]),
),
);
}
}
class _StoreCategoryListContentResult extends StatelessWidget {
final Article item;
const _StoreCategoryListContentResult(this.item, {super.key});
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final textTheme = theme.textTheme;
final size = AppSizeConfig(context);
return SizedBox(
width: size.safeAreaBlockHorizontal * 30,
child: Card(
margin: EdgeInsets.zero,
clipBehavior: Clip.antiAliasWithSaveLayer,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
flex: 3,
child: Stack(
alignment: AlignmentDirectional.center,
children: [
Align(
alignment: Alignment.center,
child: ImageNetwork(
src: item.product.imurl,
fromSize: const Size(150, 150),
),
),
],
),
),
Expanded(
flex: 2,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
item.product.contentNetWithUnitTypeCode,
maxLines: 1,
style: textTheme.bodySmall!.copyWith(
color: Colors.black54,
fontWeight: FontWeight.w300,
),
),
Text(
item.basePrice.thousandWithSymbol,
overflow: TextOverflow.ellipsis,
style: textTheme.bodyMedium!.copyWith(
fontWeight: FontWeight.w500,
),
),
Text(
item.product.name,
maxLines: 2,
style: textTheme.bodyMedium,
overflow: TextOverflow.ellipsis,
),
],
),
),
),
],
),
),
);
}
}
字符串
1条答案
按热度按时间eimct9ow1#
你可以这样写
字符串
在Stack Overflow小部件上使用screenHeight
0.3是屏幕大小的动态倍增。您可以根据需要进行调整。