Question

我有一个Card小部件，其中包含两列信息。最左侧的列在“图标”上方包含一行文本-我希望文本位于“卡片”顶部，“图标”位于底部。卡的高度由右侧的列给出（该列的下方有一个较大的图标和一行文本）。但是我无法让MainAxisAlignment.spaceBetween来完成它的工作-根据我如何设置封闭行的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'),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

因此，文字“ Test A”和“星形”图标应分别位于其列的顶部和底部。我该如何强制？

Answer 1

尝试将行包装到IntrinsicHeight中，将两个列包装到两个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'),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

卡牌窗口小部件内的列中的“间隔”间隔无效

1 个答案: