如何在行中放置图标？

Question

我有 Row 小部件，其中包含带有彩色容器和红色图标的列。

Row(
  children: [
    Padding(
      padding: const EdgeInsets.only(right: 5),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            height: 30,
            width: 100,
            color: Colors.yellow,
          ),
          Container(
            height: 30,
            width: 100,
            color: Colors.green,
          ),
          Container(
            height: 30,
            width: 100,
            color: Colors.lightGreenAccent,
          ),              
        ],
      ),
    ),
    Icon(
      Icons.add_circle,
      color: Colors.red,
      size: 30,
    )
  ],
)

我希望红色图标不位于中心，而是位于顶部（靠近第一个黄色容器）。

crossAxisAlignment: CrossAxisAlignment.start

不工作。 怎么才能向上移动呢？

Answer 1

• 通过在行上设置 crossAxisAlignment: CrossAxisAlignment.start，列和图标都在开始处对齐（在本例中为顶部）。
• 列的子项（容器）将垂直堆叠，而图标将放置在列旁边，与顶部对齐。

因此，您提供的代码将按预期工作：

Row(
crossAxisAlignment: CrossAxisAlignment.start, // Aligns children
children: [
Padding(
  padding: const EdgeInsets.only(right: 5),
  child: Column(
    mainAxisSize: MainAxisSize.min,
    crossAxisAlignment: CrossAxisAlignment.start, // Aligns containers to the start
    children: [
      Container(
        height: 30,
        width: 100,
        color: Colors.yellow,
      ),
      Container(
        height: 30,
        width: 100,
        color: Colors.green,
      ),
      Container(
        height: 30,
        width: 100,
        color: Colors.lightGreenAccent,
      ),
    ],
  ),
),
const Icon(
  Icons.add_circle,
  color: Colors.red,
  size: 30, // Icon will be aligned at the top next to the yellow container
  ),
 ],