Dart TextSize不根据颤振中的deviceSize或devicePixelRatio缩放
我想根据各种设备大小或devicePixelRatio值来缩放颤振应用程序中的文本。我知道flatter应该根据devicePixelRatio值缩放文本,所以我以这种方式更改代码,但它在我的代码中不起作用 这是我的密码:Dart TextSize不根据颤振中的deviceSize或devicePixelRatio缩放,dart,flutter,flutter-layout,Dart,Flutter,Flutter Layout,我想根据各种设备大小或devicePixelRatio值来缩放颤振应用程序中的文本。我知道flatter应该根据devicePixelRatio值缩放文本,所以我以这种方式更改代码,但它在我的代码中不起作用 这是我的密码: class MyHomePage extends StatefulWidget { @override MyHomePageState createState() => new MyHomePageState(); } class MyHomePageStat
class MyHomePage extends StatefulWidget {
@override
MyHomePageState createState() => new MyHomePageState();
}
class MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
TextStyle style50 = new TextStyle(
inherit: true,
fontSize: 50.0,
color: Colors.white,
);
TextStyle style19 = new TextStyle(
inherit: true,
color: Colors.white,
fontSize: 19.0,
fontFamily: 'helvetica_neue',
);
TextStyle style15White = new TextStyle(
inherit: true,
color: Colors.white,
fontSize: 15.0,
fontFamily: 'helvetica_neue',
);
TextStyle style15Green = new TextStyle(
inherit: true,
color: Colors.green,
fontSize: 15.0,
fontFamily: 'helvetica_neue',
);
return new Scaffold(
body: new Container(
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage("assets/images/home_page_background.png"),
fit: BoxFit.cover,
),
),
child: new Container(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Container(
margin: new EdgeInsets.only(top: 160.0),
child: new Text(
'JAHMAIKA',
textAlign: TextAlign.center,
style: style50,
),
),
new Container(
margin: new EdgeInsets.only(top: 230.0),
child: new FlatButton(
child: new Container(
padding: new EdgeInsets.only(
left: 45.0, right: 45.0, top: 15.0, bottom: 15.0),
decoration: new BoxDecoration(
shape: BoxShape.rectangle,
borderRadius: new BorderRadius.all(
new Radius.elliptical(40.0, 50.0)),
border: new Border.all(
color: Colors.white,
),
),
child: new Text(
'Create an account',
style: style19,
),
),
onPressed: () {
Navigator.push(
context,
new MaterialPageRoute(
builder: (context) => new SignUpPage()),
);
}),
),
new Container(
margin: new EdgeInsets.only(top: 16.0),
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Container(
child: new Text(
'Already have an account?',
textAlign: TextAlign.center,
style: style15White,
),
),
new GestureDetector(
onTap: () {
Navigator.push(
context,
new MaterialPageRoute(
builder: (context) => new SignInPage()),
);
},
child: new Container(
margin: new EdgeInsets.only(left: 16.0),
child: new Text('Login',
textAlign: TextAlign.center, style: style15Green),
),
),
],
),
),
],
),
)),
);
}
}
类MyHomePage扩展StatefulWidget{
@凌驾
MyHomePageState createState()=>新建MyHomePageState();
}
类MyHomePageState扩展了状态{
@凌驾
小部件构建(构建上下文){
TextStyle style50=新的TextStyle(
继承:是的,
字体大小:50.0,
颜色:颜色,白色,
);
textStyle19=新的TextStyle(
继承:是的,
颜色:颜色,白色,
字体大小:19.0,
fontFamily:“helvetica_neue”,
);
TextStyle style15白色=新的TextStyle(
继承:是的,
颜色:颜色,白色,
字体大小:15.0,
fontFamily:“helvetica_neue”,
);
TextStyle style15绿色=新的TextStyle(
继承:是的,
颜色:颜色。绿色,
字体大小:15.0,
fontFamily:“helvetica_neue”,
);
归还新脚手架(
主体:新容器(
装饰:新盒子装饰(
图片:新装饰图片(
图像:新资产评估(“资产/图像/主页\背景.png”),
适合:BoxFit.cover,
),
),
子容器:新容器(
子:新列(
crossAxisAlignment:crossAxisAlignment.stretch,
mainAxisAlignment:mainAxisAlignment.center,
儿童:[
新容器(
边距:仅限新边集(顶部:160.0),
儿童:新文本(
“贾迈卡”,
textAlign:textAlign.center,
风格:风格50,
),
),
新容器(
边距:仅限新边集(顶部:230.0),
孩子:新的扁平按钮(
子容器:新容器(
填充:仅限新边设置(
左:45.0,右:45.0,顶部:15.0,底部:15.0),
装饰:新盒子装饰(
形状:BoxShape.rectangle,
borderRadius:新建borderRadius.all(
新半径椭圆(40.0,50.0)),
边界:新边界(
颜色:颜色,白色,
),
),
儿童:新文本(
“创建帐户”,
风格:风格19,
),
),
已按下:(){
导航器。推(
上下文
新材料路线(
生成器:(上下文)=>new SignUpPage()),
);
}),
),
新容器(
边距:仅限新边集(顶部:16.0),
孩子:新的一排(
mainAxisAlignment:mainAxisAlignment.center,
儿童:[
新容器(
儿童:新文本(
“已经有账户了吗?”,
textAlign:textAlign.center,
款式:Style15白色,
),
),
新手势检测器(
onTap:(){
导航器。推(
上下文
新材料路线(
生成器:(上下文)=>新符号页()),
);
},
子容器:新容器(
边距:仅限新边集(左:16.0),
子项:新文本('Login',
textAlign:textAlign.center,样式:style15绿色),
),
),
],
),
),
],
),
)),
);
}
}
但这是行不通的。各种设备中的文本字体大小没有变化。请帮帮我。您是否尝试过根据
MediaQuery.of(context.size.width
的比例计算fontSize
使用基本设备设置大小,并使用其宽度计算其他设备的比例大小
...
Widget build(BuildContext context) {
// 414.0 is the width of an iPhone 7plus
double fs = 50.0 * MediaQuery.of(context).size.width / 414.0;
// print("MediaQuery.of(context).size.width=${MediaQuery.of(context).size.width}");
// print("fs=$fs");
TextStyle style50 = new TextStyle(
inherit: true,
fontSize: fs,
color: Colors.white,
);
...
它不能正常工作。当您在设备上从纵向切换到横向时,该“常数”随之变化。因此,只需简单地旋转屏幕,它就会过大,而这不是预期的行为。