小部件在容器内的对齐方式

Question

新手问题颤振问题。

我将屏幕划分为2个容器并将小部件放入容器中。

即使在容器内部提供足够的填充之后，我也想知道为什么图标会被切掉，以及如何在容器内部的每个小部件之间提供足够的间距。

  Widget myContainer() {
    int _act = 1;
    return Column(
      children: <Widget>[
        Expanded(
          flex: 5,
          child: Container(
            color: Colors.black26,
            padding: const EdgeInsets.only(left:35.0,top:25.0,right:35.0,bottom:35.0),
            child: Column(
              children: <Widget>[
                Icon(Icons.add_comment, size:25.0,),
                Text('Starter line', style: TextStyle(fontSize: 40.0), textAlign: TextAlign.left,),
                Text('Second line ', style: TextStyle(fontSize: 20.0), textAlign: TextAlign.left,),
              ],
            ),
          ),
        ),
        Expanded(
          flex: 5,
          child: Container(
            color: Colors.black12,
            padding: const EdgeInsets.only(left:35.0,top:20.0,right:35.0,bottom:10.0),
            child: Column(
              children: <Widget>[
//                TextField(
//                  decoration: InputDecoration(
//                      hintText: 'Sign in with Google',
//                      filled: true,
//                      fillColor: Colors.white),
//                  autofocus: true,
//                ),
                Text(
                  'Conditions apply',
                  style: TextStyle(fontSize: 20.0),
                  textAlign: TextAlign.center,
                ),
                Text(
                  'Other information',
                  style: TextStyle(fontSize: 15.0),
                  textAlign: TextAlign.center,
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }

附加图像以供参考

Answer 1

问题是你只是在顶部没有给出足够的填充物，试试100;）

但好的做法实际上就是把所有内容都包装成一个SafeArea Widget

对于定位部分，您可以使用Center() Widget包裹您的列并将其放入中心：Docs

您还可以使用Positionned() Widget非常清楚地指明它应该放入Container：Widget of the week和Docs（在您的情况下看起来非常合适）

你也可以想象使用qazxsw poi alignment属性，例如：

Column

Answer 2

使用

child: Column(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly, 
    children: <Widget>[
        ...

作为根组件

SafeArea