边框和小部件之间的颤动填充答案

【问题标题】：Flutter padding between border and widget边框和小部件之间的颤动填充
【发布时间】：2019-02-11 17:22:47
【问题描述】：

我正在尝试使用 Flutter 创建一个带有图标和标题的卡片小部件。但我无法在卡片边框和小部件之间添加一些边距。

这是我的卡代码：

class MyCard extends StatelessWidget{
  MyCard({this.title, this.icon});

  final Widget title;
  final Widget icon;

  @override
  Widget build(BuildContext context) {
  return new Container(
    padding: EdgeInsets.only(bottom: 20.0),
    child: new Card(
      child: new Row(
        children: <Widget>[
          this.icon,
          new Container(
            width: 20.0, //I also don't know if this is legal
          ),
          this.title
        ]
      )
    )
    );
  }
}

这就是结果，但我希望卡片内部有更多的填充，以便卡片更高，图标更多在右侧。

【问题讨论】：

关于“我也不知道这是否合法”的评论。完全没问题，在Row 项目之间添加空格的最简单方法。您也可以使用SizedBox 代替Container（在内部Container 也会创建一个SizedBox）。如@ap14 的答案所示

标签： flutter

【解决方案1】：

您可以在Padding 小部件内的卡片中包装小部件，也可以使用容器的padding 或margin 属性来实现所需的布局。

附：我在不同级别添加了填充。根据需要删除或添加更多填充。

代码：

class MyCard extends StatelessWidget{

 MyCard({this.title, this.icon});

  final Widget title;
  final Widget icon;

  @override
  Widget build(BuildContext context) {
    return new Container(
        padding: EdgeInsets.only(bottom: 20.0),
        child: new Card(
            child: Padding(
              padding: EdgeInsets.symmetric(vertical: 2.0),
              child: new Row(
                  children: <Widget>[
                    Padding(
                      padding: EdgeInsets.symmetric(horizontal: 5.0),
                      child: this.icon,
                    ),
                    new SizedBox(
                      width: 20.0,
                    ),
                    Container(
                      padding: EdgeInsets.symmetric(vertical: 0.5, horizontal: 1.0),
                      margin: EdgeInsets.all(2.0),
                      child: this.title,
                    )
                  ]
              ),
            )
        )
    );
  }
}

【讨论】：

【解决方案2】：

class MyCard extends StatelessWidget{
  MyCard({this.title, this.icon});

  final Widget title;
  final Widget icon;

  @override
  Widget build(BuildContext context) {
    return new Container(
        padding: EdgeInsets.only(bottom: 20.0),
        child: new Card(
            child: new Row(
                children: <Widget>[
//                  Change Your Code Here
                  new Padding(padding: new EdgeInsets.only(left: 8.0),child: this.icon,),
                  new Container(
                    width: 20.0, //I also don't know if this is legal
                  ),
                  this.title
                ]
            )
        )
    );
  }
}

【讨论】：

不是一个好的解决方案。这不会在标题右侧添加填充
@boformer 这只是一个解决方案，您可以根据自己的要求对其进行更多装饰:)

【解决方案3】：

Container(
                      padding: const EdgeInsets.all(1),
                      decoration: BoxDecoration(
                        border: Border.all(
                            color: Theme.of(context).accentColor, width: 3),
                        borderRadius: BorderRadius.circular(20),
                      ),
                      child: Container(
                        margin: const EdgeInsets.all(2),
                        padding: const EdgeInsets.all(15),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(15),
                          color: Theme.of(context).accentColor,
                        ),
                        child: Text('Evcil Hayvanlar',
                            style: Theme.of(context)
                                .textTheme
                                .button
                                .copyWith(color: Colors.white, fontSize: 24)),
                      ))

你也可以试试这个方法

【讨论】：