我是应用程序开发的新手，我正在使用flutter开发我的第一个应用程序，我发现试图通过在屏幕上使用许多不同的布局(如列、行、容器等(来定位和调整屏幕上的所有内容真的很令人沮丧，只是为了在屏幕上放置一张图片或一个按钮，其大小和位置符合ui设计的要求。然而，我发现自己非常适应只使用一个堆栈，并使用定位的小部件定位其中的所有内容，并为所有内容提供我想要的坐标。
同样为了让ui对所有屏幕尺寸都有响应，我想出了一种方法，将所有水平尺寸和位置乘以MediaQuery.of(context)/(width of the screen i am currently testing on)，将垂直尺寸乘以MediaQuery.of(context)/(height)，这在我在上测试的少数屏幕尺寸中效果很好
在我看过的所有教程中，我发现没有人在做我正在做的事情，所以我只想确定这是一种糟糕或不专业的方式，还是在某些情况下不好。
此外，有没有我可以用于flutter应用程序的构建程序？使用它们可以吗？还是我自己对所有东西都编码得更好？
下面是我用登录和注册按钮制作的一个打开页面的示例，给你一个我试图描述的例子：
class opening extends StatelessWidget {
@override
Widget build(BuildContext context) {
final mq = MediaQuery.of(context);
final loginButton = MaterialButton(
color: Color.fromRGBO(62, 59, 73, 1),
minWidth: 195*mq.size.width/392.7,
height: 45*mq.size.height/759.3,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(25*mq.size.width/392.7),),
child: AutoSizeText('LOGIN',
textAlign: TextAlign.center,
style: TextStyle( fontFamily: 'Roboto', fontSize: 14*mq.size.width/392.7, color: Color.fromRGBO(255, 248, 248, 3), fontWeight: FontWeight.bold),
),
onPressed: (){
Navigator.of(context).pushNamed(Approutes.authLogin);
},
);
final signupButton = ButtonTheme(
minWidth: 195*mq.size.width/392.7,
height: 45*mq.size.height/759.3,
child: OutlineButton(
highlightedBorderColor:Color.fromRGBO(190, 75, 75, 1) ,
borderSide: BorderSide(color: Color.fromRGBO(190, 75, 75, 1),width: 3.3*mq.size.width/392.7 ),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(25*mq.size.width/392.7)),
child: AutoSizeText('SIGN UP',
textAlign: TextAlign.center,
style: TextStyle( fontFamily: 'Roboto', fontSize: 14*mq.size.width/392.7, color: Color.fromRGBO(190, 75, 75, 1), fontWeight: FontWeight.bold),
),
onPressed: (){
Navigator.of(context).pushNamed(Approutes.authRegister);
},
)
);
return Scaffold(
backgroundColor: Color.fromRGBO(255, 248, 248, 1),
body: Stack(
children: [
Positioned(child: Image.asset('assets/images/logo.png' , width: 215*mq.size.width/392.7, fit: BoxFit.contain,),
top: 230*mq.size.height/759.3, left: 91.35*mq.size.width/392.7,),
Positioned(child:loginButton ,top: 470*mq.size.height/759.3,left: 100*mq.size.width/392.7,),
Positioned(child:signupButton ,top: 535*mq.size.height/759.3,left: 100*mq.size.width/392.7,),
],
)
);
}
}
此解决方案是正确的。例如，在我的项目中，我有一个类，在那里我准备了一些函数来找出设备的大小，并用输入的值进行计算。
class SizeConfig {
static MediaQueryData _mediaQueryData;
static double screenWidth;
static 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;
}
如果你愿意，你也可以使用它。说到一些颤振建设者，我不知道有谁。在我看来，最好自己编写代码。
尽管这可能有效，但采用这种方法使UI响应非常乏味。此外，如果要更改UI，维护这样的代码也会非常困难。
如果将来有其他人要参与这个项目，那对她/他来说将是一段非常艰难的时期。
在Flutter中使用UI确实有一个陡峭的学习曲线。然而，一旦你习惯了，与绝对职位相比，这会容易得多。