当手机碎屑大小变化时出现对准问题

问题描述 投票:0回答:1

我有应用广告的主屏幕,我希望它固定在固定的位置,即使碎石尺寸发生变化,也应该将其固定在那个位置上,我很累,5.5碎石尺寸,就是这样,如果碎石尺寸为6或更大,图像,文本等所有东西的对齐方式都会改变位置,请在此帮助我

这是我正在尝试做的Homescreen

这是我在屏幕尺寸为6 +时得到的结果

6 + inch screen

此目标代码

  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,
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
flutter flutter-layout
1个回答
0
投票

这很麻烦,因为您正在使用paddingheightwidth的值。根据设备的高度和宽度使用。

示例:

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,
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
© www.soinside.com 2019 - 2024. All rights reserved.