Question

我在flutter中制作了一些简单的自定义Widget，仅具有宽高比约束，如下所示：

Container(
  child: AspectRatio(
    aspectRation: 1.0,
    child: item != null
              ? Image.asset("assets/...")
              : Container(),
  ),
)

如果没有项目，则此小部件为空；如果设置了项目，则此部件将加载图像。我只希望它是正方形，并希望其大小受父级限制。

然后我将其中的3到5放入容器中的行中。我将容器的高度限制为在应用程序顶部成为一个条。这使内部的小部件受到我的高度的限制，如果我在该行中有3个小部件，效果很好。但是，如果我放5，我的行将溢出（到整个范围）。这当然是因为宽高比使它们也宽了100，而5乘以100对于我的UI来说太大了。我真正想要的是小部件的高度最大为100像素，但前提是它们仍然适合我的行的宽度。否则，我希望它们缩小但仍保持宽高比。我该怎么办？

这是一个小代码示例，如果我将项目置为5，它们将填满整行并保持正方形。但是，按照现在的3，项目的边框会延伸并填充所有行（不考虑长宽比）：

  Widget _buildCompBar(BuildContext context) {
    return Container(
        padding: EdgeInsets.all(10),
        height: 100,
        child: Row(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: List<Widget>.filled(
            3,
            Expanded(
              child: AspectRatio(
                aspectRatio: 1.0,
                child: Container(
                  decoration: BoxDecoration(
                    border: Border.all(width: 2),
                    borderRadius: new BorderRadius.all(Radius.circular(5.0)),
                  ),
                  child:
                      Image.asset("assets/images/mons/unit_icon_0000_0_0.png"),
                ),
              ),
            ),
          ),
        ));
  }

简而言之，在示例中，如果有足够的项目，它们会缩小以适合。但是，如果项目太少而无法填满该行，则会在项目内部而不是它们之间添加空白空间。

也尝试将图像用作装饰，然后while图像填充整个行。使用AspectRatio或FittedBox都无法使其保持正方形：

  Widget _buildCompBar(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(10),
      height: 100,
      child: Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.center,

        children: <Widget>[
          Expanded(
            child: AspectRatio(
              aspectRatio: 1.0,
              child:
                  Container(
                      decoration: new BoxDecoration(
                          border: Border.all(width: 2),
                          borderRadius:
                              new BorderRadius.all(Radius.circular(5.0)),
                          shape: BoxShape.rectangle,
                          image: new DecorationImage(
                            fit: BoxFit.cover,
                            image: AssetImage("assets/images/mons/unit_icon_0000_0_0.png"),
                          ))),
            ),
          ),
        ],
      ),
    );
  }

我觉得它作为装饰物的表现与众不同，我想那时那个容器根本没有约束。但是边框看起来要好得多（图像周围没有空白），所以我真的很想用装饰图像来解决它。

缩小子项以适合行

0 个答案: