时间戳

首页 > 解决方案 > 如何去除右溢出7.8像素

android - 如何去除右溢出7.8像素

问题描述

我正在开发一个电子商务网站，其中包括基于 web 的管理后端和使用颤振的 android 和 IOS 的前端。我面临一个关于如何删除切割项目上的“RIGHT OVERFLOWED BY 7.8 PIXEL”错误的问题。如下图所示 购物车清单

这是我的颤振代码。我将文件命名为 cart.list_item.dart

import 'package:flutter/material.dart';
import 'package:flutter_icons/flutter_icons.dart';
import 'package:fuodz/models/cart.dart';
import 'package:fuodz/constants/app_strings.dart';
import 'package:fuodz/utils/ui_spacer.dart';
import 'package:fuodz/widgets/custom_image.view.dart';
import 'package:velocity_x/velocity_x.dart';

class CartListItem extends StatelessWidget {
  const CartListItem(
    this.cart, {
    this.onQuantityChange,
    this.deleteCartItem,
    Key key,
  }) : super(key: key);

  final Cart cart;
  final Function(int) onQuantityChange;
  final Function deleteCartItem;

  @override
  Widget build(BuildContext context) {
    //
    final currencySymbol = AppStrings.currencySymbol;

    return HStack(
      [
        //
        //PRODUCT IMAGE
        CustomImage(
          imageUrl: cart.product.photo,
          width: context.percentWidth * 18,
          height: context.percentWidth * 18,
        ).box.clip(Clip.antiAlias).roundedSM.make(),

        //
        UiSpacer.horizontalSpace(),
        VStack(
          [
            //product name
            cart.product.name.text.semiBold.xl.make(),
            UiSpacer.verticalSpace(space: 0),
            //product options
            cart.optionsSentence.isNotEmpty
                ? cart.optionsSentence.text.lg.gray600.medium.make()
                : UiSpacer.emptySpace(),
            cart.optionsSentence.isNotEmpty
                ? UiSpacer.verticalSpace(space: 10)
                : UiSpacer.verticalSpace(space: 5),
            //
            VxStepper(
              defaultValue: cart.selectedQty ?? 1,
              min: 1,
              max: cart.product.availableQty ?? 20,
              disableInput: true,
              onChange: onQuantityChange,
            ),
          ],
        ).expand(),

        //
        UiSpacer.horizontalSpace(),
        VStack(
          [
            //delete icon
            Icon(
              FlutterIcons.delete_ant,
              size: 16,
              color: Colors.white,
            )
                .centered()
                .p8()
                .onInkTap(
                  this.deleteCartItem,
                )
                .box
                .roundedFull
                .color(Colors.red)
                .make(),

            //cart item price
            UiSpacer.verticalSpace(),
            "$currencySymbol ${(cart.selectedQty * cart.price).numCurrency}"
                .text
                .semiBold
                .xl
                .make(),
          ],
          crossAlignment: CrossAxisAlignment.end,
        )
      ],
    );
  }
}

标签： androidflutterdart

解决方案

你可以用这个包裹溢出的小部件，Padding这会给你一些空间。

例如，

Padding(
           padding: EdgeInsets.all(10.0), \\add padding to Left,top,right,bottom
           child: (Your_Widget)
),

或仅用于右侧：

Padding(
          padding: EdgeInsets.only(right: 10.0), \\add padding only to right side
          child: (Your_Widget)
),

推荐阅读