dart 根据屏幕大小动态调整高度的策略

svujldwt  于 12个月前  发布在  其他
关注(0)|答案(1)|浏览(96)

什么是一个很好的策略来计算高度动态根据屏幕大小的设备,如果它配置了一个更大的字体.而不会遭受堆栈溢出。除此之外,我试图使所有的卡具有相同的高度。
即使我在几个设备上增加高度,也会出现堆栈溢出,当我在其他设备上增加它时,卡在其他设备上会非常高。


的数据

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,
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

字符串

eimct9ow

eimct9ow1#

你可以这样写

double screenHeight = MediaQuery.of(context).size.height * 0.3;

字符串
在Stack Overflow小部件上使用screenHeight
0.3是屏幕大小的动态倍增。您可以根据需要进行调整。

相关问题