我有应用广告的主屏幕,我希望它固定在固定的位置,即使碎石尺寸发生变化,也应该将其固定在那个位置上,我很累,5.5碎石尺寸,就是这样,如果碎石尺寸为6或更大,图像,文本等所有东西的对齐方式都会改变位置,请在此帮助我
这是我在屏幕尺寸为6 +时得到的结果
此目标代码
Widget build(BuildContext context) {
// TODO: implement build
Size size = MediaQuery.of(context).size;
return SafeArea(
child: Scaffold(
extendBodyBehindAppBar: true,
appBar: AppBar(
leading: IconButton(
icon: Icon(Icons.menu, color: Colors.deepOrangeAccent),
iconSize: 34.0,
onPressed: () {
}),
backgroundColor: Colors.transparent,
elevation: 0,
),
body: Stack(
children: <Widget>[
Center(
child: new Image.asset(
'assets/images/home_screen_back.png',
width: size.width,
height: size.height,
fit: BoxFit.fill,
),
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Padding(
padding: EdgeInsets.only(left: 230, top: 30),
child: GestureDetector(
onTap: (){
},
child: CircleAvatar(
backgroundImage:
AssetImage("assets/images/user_avatar.png"),
radius: 45.0,
),
),
),
Padding(
padding: EdgeInsets.only(right: 20, top: 10),
child: Text(
"Test",
style: TextStyle(
fontSize: 20,
color: Colors.black,
fontWeight: FontWeight.bold),
),
),
Padding(
padding: EdgeInsets.only(right: 1.0, top: 10),
child: Text(
"123456789",
style: TextStyle(
fontSize: 18,
color: Colors.black,
),
),
),
GestureDetector(
onTap: (){
},
child: Padding(
padding: EdgeInsets.only(top: 22),
child: Container(
width: 180,
height: 50,
decoration: new BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(25),
),
gradient: new LinearGradient(
colors: [
Color.fromARGB(255, 255, 140, 0),
Color.fromARGB(255, 255, 69, 0)
],
),
),
padding: const EdgeInsets.all(15.0),
child: Text(
"Bookings History ",
style: TextStyle(
fontSize: 16,
color: Colors.white,
fontWeight: FontWeight.bold),
textAlign: TextAlign.center,
),
),
),
),
],
),
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Expanded(
flex: 0,
child: Padding(
padding: const EdgeInsets.only(top: 268),
child: Image.asset(
'assets/images/soccerstation_menu.png',
width: 150,
height: 150,
),
),
),
Expanded(
flex: 0,
child: GestureDetector(
onTap: (){
},
child: Padding(
padding: const EdgeInsets.only(top: 268),
child: Image.asset(
'assets/images/gym_menu.png',
width: 150,
height: 150,
),
),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Expanded(
flex: 0,
child: Padding(
padding: const EdgeInsets.only(top: 0.0),
child: Image.asset(
'assets/images/stem_bath_menu.png',
width: 150,
height: 150,
),
),
),
Expanded(
flex: 0,
child: GestureDetector(
onTap: (){
},
child: Padding(
padding: const EdgeInsets.only(top: 0.0),
child: Image.asset(
'assets/images/water_spa_menu.png',
width: 150,
height: 150,
),
),
),
),
],
),
],
),
)
],
),
),
);
}
这很麻烦,因为您正在使用padding
,height
和width
的值。根据设备的高度和宽度使用。
示例:
height: MediaQuery.of(context).height;
width: MediaQuery.of(context).width;
UPDTAE:
Widget build(BuildContext context) {
// TODO: implement build
Size size = MediaQuery.of(context).size;
return SafeArea(
child: Scaffold(
extendBodyBehindAppBar: true,
appBar: AppBar(
leading: IconButton(
icon: Icon(Icons.menu, color: Colors.deepOrangeAccent),
iconSize: 34.0,
onPressed: () {
}),
backgroundColor: Colors.transparent,
elevation: 0,
),
body: Stack(
children: <Widget>[
Center(
child: new Image.asset(
'assets/images/home_screen_back.png',
width: size.width,
height: size.height,
fit: BoxFit.fill,
),
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Padding(
padding: EdgeInsets.only(left: 230, top: 30),
child: GestureDetector(
onTap: (){
},
child: CircleAvatar(
backgroundImage:
AssetImage("assets/images/user_avatar.png"),
radius: 45.0,
),
),
),
Padding(
padding: EdgeInsets.only(right: 20, top: 10),
child: Text(
"Test",
style: TextStyle(
fontSize: 20,
color: Colors.black,
fontWeight: FontWeight.bold),
),
),
Padding(
padding: EdgeInsets.only(right: 1.0, top: 10),
child: Text(
"123456789",
style: TextStyle(
fontSize: 18,
color: Colors.black,
),
),
),
GestureDetector(
onTap: (){
},
child: Padding(
padding: EdgeInsets.only(top: 22),
child: Container(
width: size.width,
height: size.height,
decoration: new BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(25),
),
gradient: new LinearGradient(
colors: [
Color.fromARGB(255, 255, 140, 0),
Color.fromARGB(255, 255, 69, 0)
],
),
),
padding: const EdgeInsets.all(15.0),
child: Text(
"Bookings History ",
style: TextStyle(
fontSize: 16,
color: Colors.white,
fontWeight: FontWeight.bold),
textAlign: TextAlign.center,
),
),
),
),
],
),
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Expanded(
flex: 0,
child: Padding(
padding: const EdgeInsets.only(top: 268),
child: Image.asset(
'assets/images/soccerstation_menu.png',
width: size.width,
height: size.height,
),
),
),
Expanded(
flex: 0,
child: GestureDetector(
onTap: (){
},
child: Padding(
padding: const EdgeInsets.only(top: 268),
child: Image.asset(
'assets/images/gym_menu.png',
width: size.width,
height: size.height,
),
),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Expanded(
flex: 0,
child: Padding(
padding: const EdgeInsets.only(top: 0.0),
child: Image.asset(
'assets/images/stem_bath_menu.png',
width: size.width,
height: size.height,
),
),
),
Expanded(
flex: 0,
child: GestureDetector(
onTap: (){
},
child: Padding(
padding: const EdgeInsets.only(top: 0.0),
child: Image.asset(
'assets/images/water_spa_menu.png',
width: size.width,
height: size.height,
),
),
),
),
],
),
],
),
)
],
),
),
);
}