flutter - 容器内小部件的对齐

Question

新手问题 Flutter 问题。

我将屏幕分成 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() 小部件来包裹您的列并将其置于中心:Docs

您还可以使用 Positionned() 小部件非常清楚地指定它应该在您的 Container 中的位置:Widget of the week和 Docs (在你的情况下似乎真的很合适)

你也可以想象使用 Column 对齐属性，例如:

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