首页 文章

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

提问于
浏览 次
1

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

这是我的卡片代码：

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
        ]
      )
    )
    );
  }
}

这就是结果，但我想在卡片中加入更多的填充物，以便更高的卡片和更多的图标在右侧 .

Result

flutter

2 回答

  • -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
                ]
            )
        )
    );
  }
}
    回复于

相关问题