【问题标题】:Image Scale type center crop on flutter?颤振中的图像Scaletype centercrop?
【发布时间】:2018-08-13 16:21:05
【问题描述】:

我正在尝试执行类似于 android ImageView 中的 centerCrop 属性的操作。 设置 imageview 的高度,并使其裁剪并对齐到中心,就像 centerCrop 在 android 上的工作一样。

 Widget bindItem(BuildContext context, int index) {
return new Card(
    child: new Column(
        children: <Widget>[
          new Image.network(
            _parties[index]["cover"], fit: BoxFit.fitWidth,
            height: 120.0,
          ),
          new Text(_parties[index]['name'])
        ]
    )
);

}

@override
      Widget build(BuildContext context) {
        return new Scaffold(
            appBar: new AppBar(
              title: new Text("Parties"),
            ),
            body: new ListView.builder(
              itemCount: _parties == null ? 0 : _parties.length,
              itemBuilder: bindItem,
            )
        );
      }

结果:

【问题讨论】:

    标签: android flutter


    【解决方案1】:

    请将以下宽度和高度添加到图像中

    注意:我们正在缩放图像

    height: double.infinity, 
    width: double.infinity,`
    

    【讨论】:

      【解决方案2】:
      new Center(
                        child: Container(
                          child: new Stack(
                            children: <Widget>[
                              new Image.asset(
                                'assets/images/firebase1.png',
                                width: 100.0,
                                height: 100.0,
                              ),
                            ],
                          ),
                        ),
                      ),
      

      【讨论】:

        【解决方案3】:
        new Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                mainAxisSize: MainAxisSize.max,
                children: <Widget>[
                new Expanded(child: new Image.network(
                    cover.img,fit: BoxFit.fitWidth,
                ),
        
                ),
                Text(cover.name),
              ]
            )
        

        这对我有用

        【讨论】:

          【解决方案4】:

          Android ScaleType 和 BoxFit 应该像这样匹配:

          1. 中心 = 无
          2. CENTER_CROP = 封面
          3. CENTER_INSIDE = 缩小
          4. FIT_CENTER = 包含 (alignment.center)
          5. FIT_END = 包含 (alignment.bottomright)
          6. FIT_START = 包含 (alignment.topleft)
          7. FIT_XY = 填充

          所以你应该使用 Cover 来实现 CENTER_CROP 结果。

          编辑:

          问题应该是 Column 小部件的 crossAxisAlignment。 将此属性设置为 crossAxisAlignment:CrossAxisAlignment.stretch 应该可以解决您的问题。

          【讨论】:

          • 你能给我看一张结果和预期结果的图片吗?我认为您的父布局有问题,而不是图像本身。
          • 当前输出:i.snag.gy/FzcX1d.jpg 预期:i.snag.gy/MwG7Vb.jpg ,当我将图像添加为卡片子时,它可以工作,但如果卡片子是一列,则能够在下面添加文本,不再工作了。一切都在列表视图下,我已经更新了我的代码。谢谢!
          • 尝试在 Column 小部件上使用“crossAxisAlignment: CrossAxisAlignment.stretch”属性。我对其进行了测试,似乎可以正常工作。
          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2019-07-12
          • 2013-03-01
          • 2018-08-25
          • 2023-03-15
          • 2021-10-12
          • 2020-10-01
          相关资源
          最近更新 更多