我正在构建一个应用程序有一个问题。当我将手机字体设置为更大尺寸时,字体会导致溢出。
我试过用这个:
class SizeConfig {
static late MediaQueryData _mediaQueryData;
static late double screenWidth;
static late double screenHeight;
static double? defaultSize;
static Orientation? orientation;
void init(BuildContext context) {
_mediaQueryData = MediaQuery.of(context);
screenWidth = _mediaQueryData.size.width;
screenHeight = _mediaQueryData.size.height;
orientation = _mediaQueryData.orientation;
}
}
// Get the proportionate height as per screen size
double getProportionateScreenHeight(double inputHeight) {
double screenHeight = SizeConfig.screenHeight;
// 812 is the layout height that designer use
return (inputHeight / 812.0) * screenHeight;
}
// Get the proportionate height as per screen size
double getProportionateScreenWidth(double inputWidth) {
double screenWidth = SizeConfig.screenWidth;
// 375 is the layout width that designer use
return (inputWidth / 375.0) * screenWidth;
}
当我使用 Text
时:
Text(
"Discover our latest products",
style: TextStyle(
letterSpacing: -1,
fontFamily: 'Muli-Bold',
fontSize: getProportionateScreenWidth(35),
fontWeight: FontWeight.w700,
color: kPrimaryColor),
),
当我将手机字体设置为更大尺寸时,它会导致溢出。我认为使用屏幕尺寸可以解决它,但正如您所见,它没有。如何阻止应用更改字体大小?
回答1
如果您试图阻止文本溢出屏幕,您可以尝试:
- 将您的文本放入灵活的小部件中!:
Flexible(child: Text(
"Discover our latest products",
style: TextStyle(
letterSpacing: -1,
fontFamily: 'Muli-Bold',
fontSize: getProportionateScreenWidth(35),
fontWeight: FontWeight.w700,
color: kPrimaryColor),
),
),
- 或者设置文本的溢出选项以通过用点替换文本/淡出来隐藏其余文本,我通常使用两者的组合。
Text(
"Discover our latest products",
style: TextStyle(overflow: TextOverflow.fade,//fade/ellipsis
letterSpacing: -1,
fontFamily: 'Muli-Bold',
fontSize: getProportionateScreenWidth(35),
fontWeight: FontWeight.w700,
color: kPrimaryColor),
),