我正在创建一个设计，其中有一个中心圆容器和中心圆边缘的 5 个圆容器，但是当相同的代码在不同的设备上运行时，它们会改变它的位置，最后一个图像链接也显示了设计我建立。
“这是我创建的设计代码。”
import 'package:flutter/material.dart';
import 'package:flutter_app/circle/firstCircle.dart';
import 'package:flutter_app/circle/secondCircle.dart';
import 'package:flutter_app/circle/thirdCircle.dart';
import 'package:flutter_app/circle/fourthCircle.dart';
import 'package:flutter_app/circle/fifthCircle.dart';
import 'package:flutter/services.dart';
void main(){
runApp(new MaterialApp(home: new MyApp()));
}
class MyApp extends StatefulWidget{
MyAppState createState() => new MyAppState();
}
class MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
SystemChrome.setPreferredOrientations([
DeviceOrientation.landscapeLeft,
DeviceOrientation.landscapeRight,
]);
double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;
print('Hieght is $height and width is $width');
return new Container(
child: Material(
color: Colors.white,
child: new Center(
child: new Stack(
children: <Widget>[
new Container(
margin: EdgeInsets.all(130.0),
decoration: new BoxDecoration(
color: Colors.orange,
shape: BoxShape.circle,
),
),
//First Circle
new Positioned(
//alignment: AlignmentDirectional(0.0, -0.9),
// top: height/25,
// left: width/2 - 80,
//alignment: Alignment(0,-1.5),
child: new GestureDetector(
child: Container(
//margin: EdgeInsets.only(left: 1.0,right: 1.0),
// alignment: AlignmentDirectional(0, 0),
width: width/9,
height: width/9,
//child: Image.asset('assets/one.png'),
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(image: AssetImage('assets/one.png'),),
),
),
onTap: () => Navigator.push(context, MaterialPageRoute(builder: (context) => FirstCircle(),)),
),
top: 30,
right: 1.0,
left: 1.0,
),
//Second Circle
new Positioned(
//alignment: AlignmentDirectional(-0.57, -0.35),
child: new GestureDetector(
child: Container(
width: width/9,
height: width/9,
// margin: EdgeInsets.only(right: width/2),
//child: Image.asset('assets/two.png'),
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(image: AssetImage('assets/two.png'),),
),
),
onTap: () => Navigator.push(context, MaterialPageRoute(builder: (context) => SecondCircle(),)),
),
top: height/3,
right: rightSize(),
left: 1.0,
),
//Third Circle
new Positioned(
//alignment: AlignmentDirectional(0.57, -0.35),
child: new GestureDetector(
child: Container(
width: width/9,
height: width/9,
// margin: EdgeInsets.only(left: width/2),
//child: Image.asset('assets/three.png'),
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(image: AssetImage('assets/three.png'),),
),
),
onTap: () => Navigator.push(context, MaterialPageRoute(builder: (context) => ThirdCircle(),)),
),
top: height/3,
left: leftSize(),
right: 1.0,
),
//Fourth Circle
new Positioned(
// alignment: AlignmentDirectional(-0.35, 0.75),
child: new GestureDetector(
child: Container(
width: width/9,
height: width/9,
//child: Image.asset('assets/four.png'),
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(image: AssetImage('assets/four.png'),),
),
),
onTap: () => Navigator.push(context, MaterialPageRoute(builder: (context) => FourthCircle(),)),
),
bottom: bottomSize(),
right: 1.0,
left: 1.0 - width/4,
),
//Fifth Circle
new Positioned(
// alignment: AlignmentDirectional(0.35, 0.75),
child: new GestureDetector(
child: Container(
width: width/9,
height: width/9 ,
//child: Image.asset('assets/five.png'),
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(image: AssetImage('assets/five.png'),),
),
),
onTap: () => Navigator.push(context, MaterialPageRoute(builder: (context) => FifthCircle(),)),
),
bottom: bottomSize(),
right: 1.0 - width/4,
left: 1.0,
),
],
),
),
),
);
}
rightSize(){
double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;
double rightSize;
if(width > 1300){
rightSize = width/2 + 100;
}
else if(width >= 1280) {
rightSize = width/2 - 80;
}
else if(width == 1024){
if(height == 552){
rightSize = width/3;
}
else{
//rightSize = width/2;
rightSize = width/2;
}
}
else if(width >= 960)
{
rightSize = width/2.8;
}
return rightSize;
}
leftSize(){
double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;
double leftSize;
if(width > 1300){
leftSize = width/2 + 100;
}
else if(width >= 1280){
leftSize = width/2 - 80;
}
else if(width >= 1024){
if(height >= 552){
leftSize = width/3;
}
else{
leftSize = width/2;
}
}
else if(width >= 960){
leftSize = width/2.8;
}
return leftSize;
}
bottomSize(){
double bottomSize;
double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;
if(height >= 552){
bottomSize = height/7;
}
else{
bottomSize = height/10;
}
return bottomSize;
}
}
“我期待在所有可能的设备上进行通用设计。”
最佳答案
当我尝试创建上述设计时，我以为我给了它们特定的大小和位置，但这并不适用于所有设备，所以我使用 MediaQuery 来修复所有大小和位置。 我希望这对其他人有帮助。
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_app2/circles/firstCircle.dart';
import 'package:flutter_app2/circles/secondCircle.dart';
import 'package:flutter_app2/circles/thirdCircle.dart';
import 'package:url_launcher/url_launcher.dart';
void main() => runApp(new MaterialApp(home: new MyApp()));
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
SystemChrome.setPreferredOrientations([
DeviceOrientation.landscapeLeft,
DeviceOrientation.landscapeRight,
]);
double height = MediaQuery.of(context).size.height;
double width = MediaQuery.of(context).size.width;
return MaterialApp(
home: Scaffold(
body: Stack(
children: <Widget>[
Center(
child: Container(
width: width,
height: height,
child: Image.asset('assets/main_circle.png',fit: BoxFit.contain,),
),
),
Center(
child: Container(
height: height - 100,
width: width - 100,
//color: Colors.yellow,
child: Stack(
alignment: Alignment.center,
children: <Widget>[
Center(
child: GestureDetector(
child: Padding(
padding: EdgeInsets.only(bottom: height/1.6),
child: Container(
height: height/9,
width: width/9,
decoration: new BoxDecoration(
//color: Colors.blue,
image: DecorationImage(image: AssetImage('assets/one.png')),
shape: BoxShape.circle,
),
),
),
onTap: () => Navigator.push(context, MaterialPageRoute(builder: (context) => FirstCircle(),)),
),
),
Center(
child: GestureDetector(
child: Padding(
padding: EdgeInsets.only(right: height/1.7, bottom: width/7.5),
child: Container(
height: height/9,
width: width/9,
decoration: new BoxDecoration(
//color: Colors.blue,
image: DecorationImage(image: AssetImage('assets/two.png')),
shape: BoxShape.circle,
),
),
),
onTap: () => Navigator.push(context, MaterialPageRoute(builder: (context) => SecondCircle(),)),
),
),
Center(
child: GestureDetector(
child: Padding(
padding: EdgeInsets.only(left: height/1.9,bottom: width/7.5),
child: Container(
height: height/9,
width: width/9,
decoration: new BoxDecoration(
//color: Colors.blue,
image: DecorationImage(image: AssetImage('assets/three.png')),
shape: BoxShape.circle,
),
),
),
onTap: () => Navigator.push(context, MaterialPageRoute(builder: (context) => ThirdCircle(),)),
),
),
Center(
child: GestureDetector(
child: Padding(
padding: EdgeInsets.only(top: height/2.20,right: height/2.8),
child: Container(
height: height/9,
width: width/9,
decoration: new BoxDecoration(
//color: Colors.blue,
image: DecorationImage(image: AssetImage('assets/four.png')),
shape: BoxShape.circle,
),
),
),
onTap: () => launch('https://www.google.co.in'),
),
),
Center(
child: GestureDetector(
child: Padding(
padding: EdgeInsets.only(top: height/2.20,left: height/3.5),
child: Container(
height: height/9,
width: width/9,
decoration: new BoxDecoration(
//color: Colors.blue,
image: DecorationImage(image: AssetImage('assets/five.png')),
shape: BoxShape.circle,
),
),
),
onTap: () => launch('https://youtu.be/sPW7nDBqt8w'),
),
),
],
),
),
),
],
),
backgroundColor: Colors.white,
),
);
}
}
关于android - "Is there a way to set any object as dynamic as according devices resolution in flutter?"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57051331/