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

【问题标题】：Flutter spaceBetween doesn't work in Column inside Card widgetFlutter spaceBetween 在 Card 小部件内的 Column 中不起作用
【发布时间】：2019-12-21 03:04:21
【问题描述】：

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

我尝试在 Text 和 Icon 之间放置一个 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”和星形图标应分别位于其列的顶部和底部。我该如何强制？

【问题讨论】：

标签： flutter flutter-layout

【解决方案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'),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

【讨论】：