在行和列中进行对齐，而不是在翩翩起舞中进行填充。

Question

我正在深入学习flutter，所以我有一个疑问：我正在用flutter开发一个应用程序，我用 "Alignment "定位所有的部件，因为我不喜欢用 "padding "在屏幕上移动部件。它给了溢出太多次数和改变设备一些麻烦可能上升（屏幕大小）。

所以我想知道如何在不产生新问题的情况下，在行和列内移动小部件，改变它们的大小和所有属性。

我最担心的是屏幕上的像素溢出。

我读了一些关于一些小部件：Flexible, Expanded, Flex...我正在研究它们的行为，但我需要帮助。

这是我的代码。

return new Scaffold(
  backgroundColor: Colors.white,
  body: SafeArea(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        new Flexible(
          flex:1,
            fit: FlexFit.tight,
            child: Row(
              children: <Widget>[
                Padding(
                  padding: EdgeInsets.fromLTRB(
                    100, 0, 0, 0,
                  ),
                  child: CircleAvatar(
                    backgroundImage: 
                      AssetImage('assets/images/fallout.png'),
                    minRadius: 100,
                  ),
                ),
              ],
            ),
        ),
        new Flexible(
          flex:1,
            child: Row(
              children: <Widget>[
                Padding(
                  padding: EdgeInsets.fromLTRB(
                    0, 0, 0, 0,),
                  child: SizedBox(
                    width: 350.0,
                    height: 100.0,
                    child: TextField(
                      enabled: false,
                      obscureText: false,
                      decoration: InputDecoration(
                        disabledBorder: OutlineInputBorder(
                          borderSide: BorderSide(
                            color: Colors.yellowAccent,
                            width: 3.0,
                          ),
                        ),
                        labelText: 'Descrizione :',
                      ),
                    ),
                  ),
                ),
              ],
            ),
        ),
          ],
        ),
    ),
);
}
}

我可以用 "对齐 "或其他东西来代替 "padding"，使widget在屏幕上的移动使用屏幕的百分比而不是固定值吗？

Answer 1

你只需要使用 Align widget来实现居中、居右、居上等排列目的，同时您还需要使用 "小部件"。MediaQuery 以获得正确的设备宽度和高度，例如：- 要设置任何widget的高度和宽度，将像下面一样

              width: MediaQuery.of(context).size.width*0.8, /// YOU CAN DEFINE FROM 0.1 TO 1 AS YOUR REQUUIRMENT
              height: MediaQuery.of(context).size.height*0.2,

请看下面的例子。

  import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

class HomeScreen extends StatefulWidget {
  var inputVales;

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _HomeScreen();
  }
}

class _HomeScreen extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Align(
                alignment: Alignment.center,
                child: CircleAvatar(
                  backgroundImage: AssetImage('assets/images/fallout.png'),
                  minRadius: 100,
                )),
            SizedBox(
              height: 10.0,
            ),
            Align(
                alignment: Alignment.center,
                child: SizedBox(
                  width: MediaQuery.of(context).size.width*0.8,
                  height: MediaQuery.of(context).size.width*0.2,
                  child: TextField(
                    enabled: false,
                    obscureText: false,
                    decoration: InputDecoration(
                      disabledBorder: OutlineInputBorder(
                        borderSide: BorderSide(
                          color: Colors.yellowAccent,
                          width: 3.0,
                        ),
                      ),
                      labelText: 'Descrizione :',
                    ),
                  ),
                ))
          ],
        ),
      ),
    );
  }
}

输出将如下

Answer 2

是的！你要找的是 MediaQuery 来获取屏幕的属性

例如，要获得屏幕宽度，你可以使用 MediaQuery.of(context).size.width

被编辑了。

你可以试试这两个例子中的一个 Align 更精确

Align(
            alignment: Alignment.topCenter,
            child: MyWidget(),
        ),
        Container(
            alignment: Alignment(-0.9, -0.9),
            child: MyWidget(),
        )

另外，您也可以尝试使用 Positioned 小部件

Positioned(
        height: MediaQuery.of(context).size.height/1.5,
        width: MediaQuery.of(context).size.width+10,
        left: -5,
        top: MediaQuery.of(context).size.height*0.42,
        child: Container(
        width: MediaQuery.of(context).size.width,
      ),
      ),