Flutter Padding EdgeInsets fromLTRB 将内容推到底部

Question

我正在尝试将 底部填充 添加到我的 Column Card 小部件内（参考下面的图片和代码）： [![我的代码和布局的快照][1]][1]

代码：

Column(
                children: <Widget>[
                  Padding(padding: EdgeInsets.fromLTRB(10, 0, 10, 20)),
                  Text('${e.phrase}', style: TextStyle(color: Colors.white60),),
                  Divider(height: 5, color: Colors.transparent,),
                  Text('${e.author}', style: TextStyle(color: Colors.white60),)
                ],
              ),

问题：我越是增加底部填充值，列的内容就越被推到底部，这与预期相反，我做错了什么？请解释。 [1]: https://i.stack.imgur.com/dFKKt.png

Answer 1

你做错了。您需要将列包装在 Container 中，然后添加边距。

                Container(
                  margin: EdgeInsets.fromLTRB(10, 0, 10, 20),//Add Margin here
                  child: Column(
                    children: <Widget>[
                      Text(
                        '${e.phrase}',
                        style: TextStyle(color: Colors.white60),
                      ),
                      Divider(
                        height: 5,
                        color: Colors.transparent,
                      ),
                      Text(
                        '${e.author}',
                        style: TextStyle(color: Colors.white60),
                      )
                    ],
                  ),
                ),

Answer 2

我想为 Column widget 设置 padding 这样做

Padding(
    padding: EdgeInsets.fromLTRB(10, 0, 10, 20),
    child: Column(
        children: <Widget>[
            Text('quotes'),
            Text('quotes author')
        ],
    ),
),

您将 Padding 小部件作为 Column 的子级传递，结果是您只是将一个空框作为 Text Widget 的同级。

如果您查看 Padding 小部件的文档或源代码，您会发现 Padding 小部件接受可选的子小部件。

class Padding extends SingleChildRenderObjectWidget {
const Padding({
    Key key,
    @required this.padding,
    Widget child,
}) : assert(padding != null),
    super(key: key, child: child);

final EdgeInsetsGeometry padding;

... // other code omitted
}

因此，如果您想为容器列设置填充，则应将其设为填充小部件的子项。

Answer 3

您需要用 Column 包裹 Padding。

Padding(
      padding: const EdgeInsets.all(50.0),
      child: Text('Text Widget'),
    ),

For more information

Flutter Padding EdgeInsets fromLTRB 将内容推到底部

Flutter Padding EdgeInsets fromLTRB pushes the content to the bottom

padding

dart

flutter