flutter - 如何在 Flutter 的 Row 中自定义对齐组件？

Question

我正在构建一个Card来显示图像和一些文本信息。我希望 RED Container 内容与顶部对齐，而不是像当前一样居中。我正在使用 aRow来划分Image和Texts内容。除此之外，我想改变Texts图像右侧整个空间的位置，那么我该如何管理呢？

卡片小部件

  Widget buildExerciseCard(BuildContext context, int index) {
    return Container(
      color: Colors.green,
      margin: EdgeInsets.fromLTRB(5, 2, 5, 0),
      child: Card(
          color: Colors.blue,
          child: Row(
            children: [
              Image.asset(
                exerciseList[index].imagePath,
                width: 75,
                height: 75,
                fit: BoxFit.contain,
              ),
              Container(
                color: Colors.red,
                child: Column(
                  children: [
                    Text(exerciseList[index].name),
                    Text(exerciseList[index].bodyPart),
                    Text(exerciseList[index].muscle)
                  ],
                ),
              ),
            ],
          )),
    );
  }

结果：

标签： flutterflutter-layout

Answer 1

试试这个代码：

  Widget buildExerciseCard(BuildContext context, int index) {
    return Container(
      color: Colors.green,
      alignment: Alignment.topLeft,
      margin: EdgeInsets.fromLTRB(5, 2, 5, 0),
      child: Card(
          color: Colors.blue,
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: [
              Image.asset(
                exerciseList[index].imagePath,
                width: 75,
                height: 75,
                fit: BoxFit.contain,
              ),
              Container(
                color: Colors.red,
                child: Column(
                  children: [
                    Text(exerciseList[index].name),
                    Text(exerciseList[index].bodyPart),
                    Text(exerciseList[index].muscle)
                  ],
                ),
              ),
            ],
          )),
    );
  }