Flutter - 對齊行內的項目 - 多個磁貼

Question

我有以下列表。 我希望比例圖標（在右側）對齊。 頂部應該和下面的在同一個位置。

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding:
          const EdgeInsets.only(left: 0.0, right: 0.0, top: 8.0, bottom: 8.0),
      child: Slidable(
        endActionPane: ActionPane(motion: StretchMotion(), children: [
          //delete option
          SlidableAction(
            onPressed: deleteTapped,
            backgroundColor: Colors.red.shade400,
            icon: Icons.delete,
            borderRadius: BorderRadius.circular(8),
          )
        ]),
        child: Container(
          padding: const EdgeInsets.all(16.0),
          decoration: BoxDecoration(
            color: Color(0xFFD9F0FF),
            borderRadius: BorderRadius.circular(8),
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              const Icon(
                Icons.date_range_outlined,
                color: Color(0xFF006B8F),
              ),
              const SizedBox(width: 8),
              Text(date,
                  style: const TextStyle(
                      fontWeight: FontWeight.w400,
                      fontSize: 18,
                      color: Color(0xFF006B8F))),
              const Spacer(),
              const Text(
                "|",
                style: TextStyle(
                    fontSize: 18,
                    color: Color(0xFF006B8F),
                    fontWeight: FontWeight.bold),
              ),
              const Spacer(),
              const Icon(
                Icons.monitor_weight_outlined,
                color: Color(0xFF006B8F),
              ),
              const SizedBox(width: 8),
              Text(weight + " kg",
                  style: const TextStyle(
                      fontWeight: FontWeight.w400,
                      fontSize: 18,
                      color: Color(0xFF006B8F))),
            ],
          ),
        ),
      ),
    );
  }
}

我嘗試了幾件事，比如將圖標和文本放在容器中，但沒有成功。

任何幫助不勝感激！

Answer 1

當您已經在兩個 Size 上使用Spacer時，您可以使用

textAlign: TextAlign.center,

 const Text(
  "|",
  textAlign: TextAlign.center,
  style: TextStyle(
      fontSize: 18,
      color: Color(0xFF006B8F),
      fontWeight: FontWeight.bold),
),

沒有墊片，它可以是

Expanded(
  child: const Text(
    "|",
    textAlign: TextAlign.center,
    style: TextStyle(
        fontSize: 18,
        color: Color(0xFF006B8F),
        fontWeight: FontWeight.bold),
  ),
),

Answer 2

嘗試這個：

      Column(
              children: [
                IntrinsicHeight(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      Row(
                        children: [
                          //left part
                        ],
                      ),
                      VerticalDivider(),
                      Row(
                        
                        children: [
                          //right part
                        ],
                      )
                    ],
                  ),
                ),
                ....
                
              ],
            )