如何使这个屏幕在颤振中响应？

Question

我有点搞不懂如何用颤振来设计响应性的布局，你们能给我指出正确的方向吗?或者我的代码会被包装在Expanded小部件中？

我试着用Extended包装容器，但是它一直显示出错误，我现在很困惑。老实说，我还是个初学者。非常感谢!

而且，当我搜索时，我发现我应该避免大部分时间使用硬编码大小。因此，我想学习何时应用Extended小部件，以使我的屏幕响应。

我的代码如下：

import 'package:flutter/material.dart';

class RegisterPage extends StatefulWidget {
  RegisterPage({Key key}) : super(key: key);

  @override
  _RegisterPageState createState() => _RegisterPageState();
}

class _RegisterPageState extends State<RegisterPage> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        backgroundColor: Color(0xff0D192A),
        body: Container(
          child: ListView(
            children: <Widget>[
              Column(
                children: <Widget>[
                  Padding(
                    padding: EdgeInsets.all(10.0),
                    child: Container(
                      height: 200,
                      width: 200,
                      child: Image(
                        image: AssetImage("assets/images/vlogo.png"),
                      ),
                    ),
                  ),
                  Padding(
                      padding: EdgeInsets.all(40.0),
                      child: Center(
                        child: Text("Register an Account",
                            style: TextStyle(
                                color: Colors.white,
                                fontWeight: FontWeight.bold,
                                fontSize: 20)),
                      )),
                  Padding(
                    padding: EdgeInsets.fromLTRB(20, 0, 0, 0),
                    child: Column(
                      children: <Widget>[
                        Row(
                          children: <Widget>[
                            Text("Email Address",
                                style: TextStyle(
                                    fontSize: 10.0, color: Colors.grey[400])),
                          ],
                        ),
                      ],
                    ),
                  ),
                  SizedBox(height:10.0),
                  Container(
                    margin: EdgeInsets.fromLTRB(20, 0, 20, 0),
                      padding: EdgeInsets.all(5.0),
                      decoration: BoxDecoration(
                        color: Colors.black,
                        borderRadius: BorderRadius.circular(10),
                      ),
                      child: Center(
                        child: Padding(
                          padding: EdgeInsets.fromLTRB(20, 0, 0, 0),
                          child: TextField(
                            decoration: InputDecoration(
                              border: InputBorder.none,
                              hintText: "Enter your email address",
                              hintStyle: TextStyle(color: Colors.grey[400]),
                            ),
                          ),
                        ),
                      )
                      ),
                  SizedBox(height:20.0),
                  Padding(
                    padding: EdgeInsets.fromLTRB(20, 0, 0, 0),
                    child: Column(
                      children: <Widget>[
                        Row(
                          children: <Widget>[
                            Text("Choose Password",
                                style: TextStyle(
                                    fontSize: 10.0, color: Colors.grey[400])),
                          ],
                        ),
                      ],
                    ),
                  ),
                  SizedBox(height:10.0),
                  Container(
                    margin: EdgeInsets.fromLTRB(20, 0, 20, 0),
                      padding: EdgeInsets.all(5.0),
                      decoration: BoxDecoration(
                        color: Colors.black,
                        borderRadius: BorderRadius.circular(10),
                      ),
                      child: Center(
                        child: Padding(
                          padding: EdgeInsets.fromLTRB(20, 0, 0, 0),
                          child: TextField(
                            decoration: InputDecoration(
                              border: InputBorder.none,
                              hintText: "Enter your email address",
                              hintStyle: TextStyle(color: Colors.grey[400]),
                            ),
                          ),
                        ),
                      )
                      ),
                     SizedBox(height: 50),
                     Padding(
                       padding:  EdgeInsets.fromLTRB(20, 0, 20, 0),
                       child: InkWell(
                         onTap: () {
                           setState(() {

                           });
                         },
                           child: Container(
                           height: 50,
                           decoration: BoxDecoration(
                             color: Color.fromRGBO(211, 184, 117, 100)
                           ),
                           child: Center(
                             child: Text("Login", style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 20),
                             ),
                           ),
                         ),
                       ),
                     ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

探索这个插件:这是我曾经使用过的最有效的插件之一，用于响应性设计。

https://pub.dev/packages/responsive_screen

或

使用MediQuery()获取屏幕的高度和宽度，即：-

Example: 

 @override
  Widget build(BuildContext context) {
     dynamic screenHeight = MediaQuery.of(context).size.height;
     dynamic screenwidth = MediaQuery.of(context).size.width;

   //use screenHeight and screenWidth variable for defining the height and 
   //width of the Widgets.

   return Container(
       height:screenHeight * .2,  //It will take the 20%  height of the screen
       width: screenwidth * .5,  //It will take the 50% width of the screen
       //height: screenHeight,   //It will take 100% height

       child: Image(
         image: AssetImage("assets/images/vlogo.png"),
      );



   }

Answer 2

只需使用MediaQuery或LayoutBuilder概念，就可以使每个屏幕快速响应。

对于您的应用程序，请替换所有自定义大小，如

width : MediaQuery.of(context).size.width * 0.1
height : MediaQuery.of(context).size.height * 0.3

MediaQuery为您提供屏幕的大小和方向。

甚至您的填充，边缘和其他尺寸也应该计算使用MediaQuery，以使它的响应。

在这里，MediaQuery.of(上下文).size.width将给出当前设备屏幕的宽度，MediaQuery.of(上下文).size.height将给出当前设备屏幕的高度。

另外，您还可以使用LayoutBuilder Widget，

LayoutBuilder(
    builder: (context, constraints) {
        if(constraints.maxWidth > 500) {
            getLandscapeLayout();
        } else {
            getPortraitLayout();
        }
    },
)

LayoutBuilder是一个小部件，它提供其父部件的维度，因此我们可以知道小部件有多少空间，并相应地构建它。

因此，这两个最强大的概念是可用的颤振，以使您的应用程序完全响应。