当前位置: 首页 > 知识库问答 >
问题:

如何让flutter app根据不同屏幕尺寸做出响应?

何乐
2023-03-14

我面临的困难是使它响应各种屏幕大小。如何让它反应灵敏?

@override
       Widget build(BuildContext context) {
       return new Container(
       decoration: new BoxDecoration(color: Colors.white),
       child: new Stack(
        children: [
          new Padding(
            padding: const EdgeInsets.only(bottom: 350.0),
            child: new GradientAppBar(" "),
          ),
          new Positioned(
            bottom: 150.0,
            height: 260.0,
            left: 10.0,
            right: 10.0,
            child: new Padding(
              padding: new EdgeInsets.all(10.0),
              child: new Card(
                child: new Column(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    const ListTile(
                      title: const Text(
                        'LOGIN',
                        textAlign: TextAlign.center,
                        style: const TextStyle(
                          fontSize: 16.50,
                          fontFamily: "Helvetica",
                          fontWeight: FontWeight.bold,
                          color: Colors.black87,
                          letterSpacing: 1.00,
                        ),
                      ),
                    ),
                    new ListTile(
                      leading: const Icon(Icons.person),
                      title: new TextField(
                        controller: _user1,
                        decoration: new InputDecoration(
                            labelText: '     Enter a username'),
                      ),
                    ),
                    new ListTile(
                      leading: const Icon(Icons.person_pin),
                      title: new TextField(
                        controller: _pass1,
                        decoration: new InputDecoration(
                            labelText: '     Enter a password'),
                        obscureText: true,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
          new Positioned(
            bottom: 70.0,
            left: 15.0,
            right: 05.0,
            child: new ButtonTheme.bar(
            // make buttons use the appropriate styles for cards
              child: new ButtonBar(
                children: <Widget>[
                  new FlatButton(
                    padding: new EdgeInsets.only(right: 13.0),
                    child: new Text(
                      'REGISTER HERE',
                      style: new TextStyle(
                          color: Colors.black87,
                          fontFamily: "Helvetica",
                          fontSize: 15.00,
                          fontWeight: FontWeight.bold),
                    ),
                    onPressed: () {
                      Navigator.of(context).pushNamed('/facebook');
                    },
                  ),
                  new FlatButton(
                    padding: new EdgeInsets.only(right: 22.0),
                    child: new Text(
                      'FORGOT PASSWORD?',
                      style: new TextStyle(
                          color: Colors.black87,
                          fontFamily: "Helvetica",
                          fontSize: 15.00,
                          fontWeight: FontWeight.bold),
                    ),
                    onPressed: () {
                      Navigator.of(context).pushNamed('/Forgot');
                    },
                  ),
                ],
              ),
            ),
          ),
          new Positioned(
            bottom: 73.0,
            height: 180.0,
            left: 20.0,
            right: 52.0,
            child: new Padding(
              padding: new EdgeInsets.all(0.00),
              child: new ButtonTheme(
                minWidth: 10.0,
                height: 20.0,
                padding: new EdgeInsets.only(right: 37.0),
                child: new ButtonBar(children: <Widget>[
                  new CupertinoButton(
                      borderRadius:
                          const BorderRadius.all(const Radius.circular(36.0)),
                      padding: new EdgeInsets.only(left: 70.0),
                      color: const Color(0xFF426DB7),
                      child: new Text(
                        "     LOGIN                            ",
                        style: new TextStyle(
                            color: Colors.white,
                            fontSize: 12.50,
                            fontFamily: "Handwriting",
                            fontWeight: FontWeight.w500,
                            letterSpacing: 0.00),
                      ),
                      onPressed: () {})
                ]),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

共有1个答案

子车凯泽
2023-03-14

使用mediaquery类:

MediaQueryData queryData;
queryData = MediaQuery.of(context);

MediaQuery:建立一个子树,媒体查询在其中解析为给定的数据。

MediaQueryData:关于一段媒体(例如,一个窗口)的信息。

queryData.devicePixelRatio
queryData.size.width
queryData.size.height

获取文本比例因子:

queryData.textScaleFactor

使用Aspectratio类:

来自单据:

小部件首先尝试布局约束允许的最大宽度。小部件的高度是通过将给定的纵横比应用于宽度来确定的,宽度表示为宽与高的比值。

例如,16:9宽高纵横比的值为16.0/9.0。如果最大宽度是无限大的,则通过将纵横比应用于最大高度来确定初始宽度。

现在考虑第二个示例,这一次的纵横比为2.0,布局约束要求宽度介于0.0和100.0之间,高度介于0.0和100.0之间。我们将选择100.0的宽度(允许的最大值)和50.0的高度(以匹配纵横比)。

//example
new Center(
 child: new AspectRatio(
  aspectRatio: 100 / 100,
  child: new Container(
    decoration: new BoxDecoration(
      shape: BoxShape.rectangle,
      color: Colors.orange,
      )
    ),
  ),
),

您还可以使用:

  • LayoutBuilder
  • FittedBox
  • CustomMultiChildLayout
 类似资料:
  • 我试图用swXXXdp布局文件为不同的屏幕大小创建不同的布局。不幸的是,我仍然不能分开5,0“和6,3”作为可见的附上的图像。两种大小仍然使用相同的文件:layout-sw412dp。对此有什么想法吗?

  • 简介 本文将介绍 Weex 适配不同尺寸屏幕的方法以及横竖屏动态切换时如何自适应。 Weex 如何将前端样式值转换为系统坐标值 以 iOS 为例,在应用启动时,Weex 获取当前屏幕宽度作为全局默认值。在 iOS 系统上该宽度为实际像素/屏幕比例后的 UIKit 宽度。比如 iPhone6 为 375。 @implementation WXCoreBridge + (void)install

  • 我试图理解一款支持不同屏幕大小的游戏(android)中的速度概念。 假设我有一个精灵,从横向模式的右端到左端需要10秒。帧速率并不稳定,所以有时会持续30秒,然后突然变为10秒。但我还是希望我的雪碧从一端到另一端需要10秒钟。我该怎么做? 这就是我所理解的: 通过将屏幕宽度除以从一端到另一端获取精灵的时间,可以获得基本速度。如果有稳定的帧速率,则基本速度是精灵每秒应添加到当前位置的速度。然而,我

  • 问题内容: 嗨,我正在编写图形程序,我一直在寻找一种获取所使用屏幕物理尺寸的方法。我可以获得以像素为单位的屏幕大小以及逻辑分辨率。我似乎找不到任何地方可以获取任何显示器规格中始终具有的物理尺寸(例如19“-376 x 301 mm)。问题是,加载此信息时,此信息是否甚至还存储在OS中的任何位置?我正在编写的程序需要在Mac和Windows上运行。 谢谢! nt 问题答案: 我认为Java不可能实现

  • 问题内容: 我已经仔细阅读了http://developer.android.com/guide/practices/screens_support.html和其他相关网站中的文档,但我仍然对此表示怀疑。让我解释: 我已经为值,values-large和values- xlarge实现了dimens.xml,因此,例如,在平板电脑上运行时,我的Android应用程序很好。但是,我指定了填充,边距,

  • 问题内容: 我想知道是否可以使用tkinter计算屏幕尺寸。 我想要这样做,这样可以使程序在屏幕中央打开。 问题答案: