【问题标题】:How to assign an image background to a column in flutter如何将图像背景分配给颤振中的列
【发布时间】:2019-03-13 16:52:33
【问题描述】:

我想知道如何在 Flutter 中将图像作为背景添加到我的翻转卡片中的列中。

关于我想在哪里添加图像的代码如下所示(从子新列到最后):

 FlipCard(
            direction: FlipDirection.HORIZONTAL, // default
            front: Container(
              decoration: new BoxDecoration(
                border: new Border.all(color: Colors.black),
                borderRadius: BorderRadius.circular(10.0),
              ),
              margin: EdgeInsets.all(10.0),
              child: new Column(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  new Column(
                    children: <Widget>[
                      new Container(
                          margin: EdgeInsets.all(10),
                          width: 190.0,
                          height: 190.0,
                          decoration: new BoxDecoration(
                              shape: BoxShape.circle,
                              border: new Border.all(color: Colors.black),
                              image: new DecorationImage(
                                  fit: BoxFit.fill,
                                  image: new NetworkImage(
                                      "https://pbs.twimg.com/profile_images/610120554738266112/I4pl2ygE_400x400.jpg")
                              )
                          )
                      ),
                      new Text('Lars Løkke',
                        style: new TextStyle(
                          fontSize: 20.0,
                        ),
                      ),
                      new Text('Venstre',
                        style: new TextStyle(
                          fontSize: 15,
                        ),
                      ),
                    ],
                  ),

在图片中可以看到完整布局的位置,并用蓝色勾勒出我想要图像背景的位置:

希望你能帮助我,谢谢。

【问题讨论】:

    标签: dart flutter flutter-layout


    【解决方案1】:

    简单地包裹 - Column 和 - DecoratedBox

    代码:

    FlipCard(
                   direction: FlipDirection.HORIZONTAL, // default
                  child: Container(
                      decoration: new BoxDecoration(
                        border: new Border.all(color: Colors.black),
                        borderRadius: BorderRadius.circular(10.0),
                      ),
                      margin: EdgeInsets.all(10.0),
                      child: new Column(
                          mainAxisAlignment: MainAxisAlignment.start,
                          children: [
                            DecoratedBox(  // add this
                              child: new Column(
                                children: <Widget>[
                                  new Container(
                                      margin: EdgeInsets.all(10),
                                      width: 190.0,
                                      height: 190.0,
                                      decoration: new BoxDecoration(
                                          shape: BoxShape.circle,
                                          border: new Border.all(color: Colors.black),
                                          image: new DecorationImage(
                                              fit: BoxFit.fill,
                                              image: new NetworkImage(
                                                  "https://pbs.twimg.com/profile_images/610120554738266112/I4pl2ygE_400x400.jpg")))),
                                  new Text(
                                    'Lars Løkke',
                                    style: new TextStyle(
                                      fontSize: 20.0,
                                      color: Colors.white
                                    ),
                                  ),
                                  new Text(
                                    'Venstre',
                                    style: new TextStyle(
                                      fontSize: 15,
                                        color: Colors.white
                                    ),
                                  ),
                                ],
                                mainAxisSize: MainAxisSize.min,
                              ),
                              decoration: BoxDecoration(
                                  image: DecorationImage(
                                      image: NetworkImage(
                                          'https://placeimg.com/640/480/any'),fit: BoxFit.fill)),
                            ),
                          ]))),
    

    输出:

    【讨论】:

    • 我得到了它的工作,但填充并不能掩盖一切,但我会努力解决这个问题。感谢您的帮助。
    • 你知道为什么我最终无法拉伸图像,无论大小吗? i.imgur.com/ofNE6Jb.png
    • 添加横轴对齐以在列中拉伸
    • 我应该把对齐放在哪里,如果我把对齐放在同一个地方,它不会接受我的对齐。对齐方式:CrossAxisAlignment.stretch
    猜你喜欢
    • 2020-10-01
    • 2022-01-14
    • 2020-11-23
    • 2019-05-27
    • 2019-10-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多