0

我正在尝试将红色块移动到Container. 我尝试了很多变体，但无论我将代码移动到哪里，那个“红色容器”位，我都无法将它移到右上角的位置。当我定位正确时，我会将其设为可点击的图标。

我确实将它与其他文本一起移动到子小部件中，调整了“crossAxisAlignment 以在该行中拉伸，并将 mainAxisAlignment 调整为 spaceBetween”

我最接近的是第二张图片，它是下面添加的代码。

我错过了什么？

在此处输入图像描述

在此处输入图像描述

items.add(
        Container(
          decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.all(Radius.circular(10.0)),
              boxShadow: [BoxShadow(color: Colors.black12,spreadRadius: 2.0,blurRadius: 5.0),]),
          margin: EdgeInsets.all(5.0),
          child: Row(
            mainAxisSize: MainAxisSize.max,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              ClipRRect(
                borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(10.0),
                    bottomLeft: Radius.circular(10.0)),
                child: Image.asset(object["personImage"],
                  width: 80,height: 80,fit: BoxFit.cover,
                ),
              ),
              Container(
                color: Colors.blue[900],
                child: Padding(
                  padding: const EdgeInsets.fromLTRB(8, 8, 0, 0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Text(object["personName"]),
                      Text(object["personPlace"]),
                      Text(object["personDate"]),
                      Text(object["personCircle"]),
                    ],
                  ),
                ),
              ),
              Container(
                alignment: Alignment.topRight,
                height: 42.0,
                width: 42.0,
                color: Colors.red,
              )
            ],
          ),
        ),
      );
    },
  );

  return items;

编辑：所以两个解决方案效果很好。在蓝色和红色容器之间添加一个小部件。谢谢你们俩:)

TT圣人 »Spacer(),

维伦 V 瓦拉萨迪亚 »Expanded(child: Container()),

4

2 回答 2

1

您需要使用 Expanded 小部件来执行此操作。

在下面的代码中，我展示了如何添加扩展小部件以及添加位置。

Container(
            color: Colors.blue[900],
            child: Padding(
              padding: const EdgeInsets.fromLTRB(8, 8, 0, 0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text(object["personName"]),
                  Text(object["personPlace"]),
                  Text(object["personDate"]),
                  Text(object["personCircle"]),
                ],
              ),
            ),
          ),
          Expanded(child: Container()),  // added widget
          Container(
            alignment: Alignment.topRight,
            height: 42.0,
            width: 42.0,
            color: Colors.red,
          )
于 2020-05-13T15:06:24.623 回答
1

Spacer()您可以使用为此调用的小部件。

小Spacer部件占用了小部件其余部分未使用的空间。检查下面的代码，它工作正常：

items.add(
        Container(
          decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.all(Radius.circular(10.0)),
              boxShadow: [BoxShadow(color: Colors.black12,spreadRadius: 2.0,blurRadius: 5.0),]),
          margin: EdgeInsets.all(5.0),
          child: Row(
            mainAxisSize: MainAxisSize.max,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              ClipRRect(
                borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(10.0),
                    bottomLeft: Radius.circular(10.0)),
                child: Image.asset(object["personImage"],
                  width: 80,height: 80,fit: BoxFit.cover,
                ),
              ),
              Container(
                color: Colors.blue[900],
                child: Padding(
                  padding: const EdgeInsets.fromLTRB(8, 8, 0, 0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Text(object["personName"]),
                      Text(object["personPlace"]),
                      Text(object["personDate"]),
                      Text(object["personCircle"]),
                    ],
                  ),
                ),
              ),
              // add your spacer widget here
              Spacer(),
              Container(
                alignment: Alignment.topRight,
                height: 42.0,
                width: 42.0,
                color: Colors.red,
              )
            ],
          ),
        ),
      );
    },
  );

  return items;

我希望这回答了你的问题。

于 2020-05-13T15:10:32.150 回答