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

使用SafeArea作为根组件

Widget myContainer() {
    int _act = 1;
    return SafeArea(
      child: Column(/*...Your code ....*/)
    );
}

Answer 2

问题是您只是在顶部没有提供足够的填充，请尝试100;）

但是好的做法实际上是将所有内容包装到SafeArea小部件中

对于定位部分，您可以使用Center()小部件将列包装并使其居中：Docs

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

您还可以想象使用Column对齐属性，例如：

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

容器内小部件的对齐

2 个答案: