flutter - 行和列对齐而不是填充抖动

Question

我会更深入地学习 flutter 学习，所以我对此表示怀疑:
我正在开发带有波动的应用程序，并且将所有小部件都使用“对齐”定位，因为我不喜欢使用“填充”在屏幕上移动小部件。它使溢出次数过多，并且更换设备时可能会增加一些麻烦(屏幕尺寸)。

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

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

我阅读了一些有关小部件的内容:灵活，扩展，灵活...我正在研究它们的行为，但需要帮助。

这是我的代码:

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”替换为“alignment”，还是可以使用一定百分比的屏幕非固定值在屏幕上移动小部件的东西？

Answer 1

您只需要使用Align小部件来达到诸如居中，右上，.. etc等目的，还需要使用MediaQuery来正确获取设备的宽度和高度，
示例:-要设置任何小部件的高度和宽度，将如下所示

              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 :',
                    ),
                  ),
                ))
          ],
        ),
      ),
    );
  }
}

和输出将跟随