扑。列 mainAxisAlignment spaceBetween 在 Row 内不起作用

Posted 2023-02-23

【中文标题】扑。列 mainAxisAlignment spaceBetween 在 Row 内不起作用

【英文标题】：Flutter. Column mainAxisAlignment spaceBetween not working inside Row

【发布时间】：2022-01-18 21:38:27

【问题描述】：

我正在尝试制作这样的屏幕：

为此，我将 ListView 与自定义项一起使用。 这是我的项目代码：

  @override
  Widget build(BuildContext context) 
    return Padding(
        padding: const EdgeInsets.all(10),
        child: Card(
          elevation: 5,
          color: Colors.greenAccent,
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(6)),
          child: Padding(
            padding: const EdgeInsets.all(12.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    SizedBox(
                      width: 65,
                      height: 65,
                      child: ClipRRect(
                          borderRadius: BorderRadius.circular(8),
                          child: Image.asset(
                            "assets/images/temp.png",
                            alignment: Alignment.center,
                          )),
                    ),
                    const SizedBox(width: 18),
                    Expanded(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: const [
                              Text(
                                "Test title",
                                textAlign: TextAlign.left,
                                style: TextStyle(
                                    color: Colors.red,
                                    fontSize: 17,
                                    fontWeight: FontWeight.w500),
                              ),
                              Text(
                                "TestDescription",
                                style: TextStyle(
                                    color: Colors.deepOrangeAccent,
                                    fontSize: 15,
                                    fontWeight: FontWeight.w700),
                              ),
                            ],
                          ),
                          Spacer(),
                          CustomButton(
                            onPressed: () ,
                          )
                        ],
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ));
  

我需要将标题和描述对齐到顶部，并将自定义底部对齐到底部。为此，我在 Column 内使用 Spacer() 并用 Expanded 小部件包装了我的 Column。但是当我用 Expanded 包装我的小部件时，我会收到如下错误：

RenderFlex 子级具有非零 flex 但传入的高度约束 是无限的。

当列在不提供有限高度的父级中时 约束，例如，如果它处于垂直可滚动状态，它将尝试 沿垂直轴收缩包裹其子项。设置 flex on 一个孩子（例如使用 Expanded）表示该孩子将扩展为 在垂直方向填充剩余空间。这两个 指令是互斥的。如果父母要收缩包装 子，子不能同时扩展以适应其父。

考虑将 mainAxisSize 设置为 MainAxisSize.min 并使用 FlexFit.loose 适合灵活的孩子（使用 Flexible 而不是 比扩展）。这将允许灵活的孩子调整大小 他们自己比他们会的无限剩余空间少 否则被强制取，然后会导致 RenderFlex 收缩包裹孩子而不是扩大以适应最大值 父级提供的约束。

当我删除 Expanded() 和 Spacer() 时，错误号。但我得到错误的看法。看图片：

请帮我看看我做错了什么（

【参考方案1】：

您可以使用IntrinsicHeight 作为Row 的父级，以使用crossAxisAlignment: CrossAxisAlignment.stretch, 获得期望结果，然后对于Rows 的子级可以使用Flexible 或Exapnded 小部件进行包装。

 @override
  Widget build(BuildContext context) 
    return Padding(
      padding: const EdgeInsets.all(10),
      child: Card(
        elevation: 5,
        color: Colors.greenAccent,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(6)),
        child: Padding(
          padding: const EdgeInsets.all(12.0),
          child: IntrinsicHeight(
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Flexible(
                  // or exapnded
                  // fit: FlexFit.tight,
                  flex: 1,
                  child: Container(
                    height: 65,
                    width: 64,
                    color: Colors.amber,
                    child: Text("Image"),
                  ),
                ),
                Flexible(
                  flex: 1,
                  fit: FlexFit.tight,
                  child: Column(
                    mainAxisSize: MainAxisSize.max,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Column(
                        mainAxisSize: MainAxisSize.min,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          Text("Item 1"),
                          Text("Item 2"),
                        ],
                      ),
                      Text("Item b x"),
                    ],
                  ),
                ),
                Flexible(
                  flex: 1,
                  // fit: FlexFit.tight,
                  child: Container(
                    color: Colors.cyanAccent,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      crossAxisAlignment: CrossAxisAlignment.end,
                      children: const [
                        Text("lT"),
                        Text("lBsssssssssssss"),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );