Flutter spaceBetween 在 Card 小部件内的 Column 中不起作用

Question

我有一个包含两列信息的 Card 小部件。最左边的列包含图标上方的一行文本 - 我想要卡片顶部的文本和底部的图标。卡片的高度由右侧的 Column 给出(它有一个更大的图标和下面的一行文本)。但我无法让 MainAxisAlignment.spaceBetween 完成它的工作 - 第一个 Column 在顶部/中心/底部保持挤压在一起，具体取决于我如何设置封闭行的 crossAxisAlignment。

我试过在文本和图标之间放置一个 SizedBox，这确实将它们隔开 - 但编码布局的全部要点在于它应该能够推断出这些空间。我不想对其进行硬编码；它由基于右侧较大列的卡片大小定义。

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

class CardTestWidget extends StatefulWidget {
  @override
  _CardTestWidgetState createState() => _CardTestWidgetState();
}

class _CardTestWidgetState extends State<CardTestWidget> {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(
        vertical: 5.0,
        horizontal: 15.0,
      ),
      child: Card(
        color: Colors.grey,
        elevation: 7.5,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10.0),
        ),
        child: Padding(
          padding: const EdgeInsets.symmetric(
            vertical: 15.0,
            horizontal: 20.0,
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.symmetric(
                      vertical: 8.0,
                    ),
                    child: Text('Test A'),
                  ),
                  Padding(
                      padding: const EdgeInsets.symmetric(vertical: 8.0),
                      child: Icon(
                        FontAwesomeIcons.solidStar,
                        color: Colors.red,
                      ))
                ],
              ),
              Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  Container(
                    child: Icon(FontAwesomeIcons.podcast, color: Colors.blueAccent, size: 72.0,),
                  ),
                  Padding(
                    padding: const EdgeInsets.fromLTRB(0, 8, 0, 0),
                    child: Text('Podcast'),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

因此文本“测试 A”和星形图标应分别位于其列的顶部和底部。我该如何强制执行此操作？

Answer 1

尝试将您的 Row 包装成 IntrinsicHeight 并将您的两个 Columns 包装成两个 Expanded 然后它应该可以正常工作.

代码如下:

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

class CardTestWidget extends StatefulWidget {
  @override
  _CardTestWidgetState createState() => _CardTestWidgetState();
}

class _CardTestWidgetState extends State<CardTestWidget> {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(
        vertical: 5.0,
        horizontal: 15.0,
      ),
      child: Card(
        color: Colors.grey,
        elevation: 7.5,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10.0),
        ),
        child: Padding(
          padding: const EdgeInsets.symmetric(
            vertical: 15.0,
            horizontal: 20.0,
          ),
          child: IntrinsicHeight(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Expanded(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Padding(
                        padding: const EdgeInsets.symmetric(
                          vertical: 8.0,
                        ),
                        child: Text('Test A'),
                      ),
                      Padding(
                          padding: const EdgeInsets.symmetric(vertical: 8.0),
                          child: Icon(
                            FontAwesomeIcons.solidStar,
                            color: Colors.red,
                          ))
                    ],
                  ),
                ),
                Expanded(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      Container(
                        child: Icon(
                          FontAwesomeIcons.podcast,
                          color: Colors.blueAccent,
                          size: 72.0,
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.fromLTRB(0, 8, 0, 0),
                        child: Text('Podcast'),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}