将列的每个子项扩展到顶部和底部

Question

我正在尝试离开

到

但我不确定如何将列的顶部标题限制在其顶部，将副标题限制在其底部。为了使每一列（左列和右列）适当地显示它们的数据并使用 mainAxis/crossAxis 值限制它们的位置，我使用了具有适当弹性因子的 Expanded。但是，我怎样才能对列的子项做同样的事情呢？

这是用于列表中每个项目的有状态小部件：

class PickUpGameItem extends StatefulWidget {
  final String gameId;
  final PickUpGameDetails details;

  const PickUpGameItem(this.gameId, this.details, Key? key) : super(key: key);

  @override
  _PickUpGameItemState createState() => _PickUpGameItemState();
}

class _PickUpGameItemState extends State<PickUpGameItem> {
  PickUpGameDetails? _gameDetails;
  GameDetailsBloc? _detailsBloc;

  @override
  void initState() {
    super.initState();
    _detailsBloc = BlocProvider.of<GameDetailsBloc>(context);
    _detailsBloc!.subscribeToGameDetailsUpdatesWithId(widget.gameId);
  }

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<Tuple2<String, PickUpGameDetails>>(
        stream: _detailsBloc!.detailsUpdatesStream,
        builder: (context, snapshot) {
          if (snapshot.hasError ||
              snapshot.connectionState == ConnectionState.waiting) {
            return const SizedBox();
          } else {
            if (snapshot.data!.item1 == widget.gameId) {
              _gameDetails = snapshot.data!.item2;
            } else {
              _gameDetails = widget.details;
            }
          }
          return Container(
            padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 8),
            child: Row(
              children: [
                ClipRRect(
                  borderRadius: BorderRadius.circular(10.0),
                  child: _gameDetails!.locationInfo == null
                      ? const SizedBox()
                      : CachedNetworkImage(
                          imageUrl:
                              _gameDetails!.locationInfo!.pictures.elementAt(0),
                          width: 85,
                          height: 85,
                          fit: BoxFit.cover,
                          placeholder: (context, url) => const SizedBox(
                              child: Center(child: CircularProgressIndicator()),
                              width: 10,
                              height: 10),
                        ),
                ),
                const SizedBox(
                  width: 10,
                ),
                Expanded(
                  flex: 7,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        _gameDetails!.locationInfo == null
                            ? 'Loading...'
                            : _gameDetails!.locationInfo!.nam,
                        style: const TextStyle(
                            fontFamily: 'PingFang',
                            fontWeight: FontWeight.w600,
                            fontSize: 15),
                        maxLines: 2,
                        overflow: TextOverflow.ellipsis,
                      ),
                      _gameDetails!.gameData!.hostInfo == null
                          ? Text(
                              _gameDetails!.gameData!.gameTypeMsg!,
                              style: const TextStyle(
                                  color: Colors.black,
                                  fontFamily: 'PingFang',
                                  fontWeight: FontWeight.w200,
                                  fontSize: 16),
                              maxLines: 2,
                              overflow: TextOverflow.ellipsis,
                            )
                          : Text(
                              '${_gameDetails!.gameData!.gameTypeMsg!} with ${_gameDetails!.gameData!.hostInfo!.hostNickname}.',
                              style: const TextStyle(
                                  color: Colors.black,
                                  fontFamily: 'PingFang',
                                  fontWeight: FontWeight.w200,
                                  fontSize: 16),
                              maxLines: 2,
                              overflow: TextOverflow.ellipsis,
                            ),
                    ],
                  ),
                ),
                Expanded(
                  flex: 3,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: [
                      Text(
                        GameData.getGameTimestamp(
                            _gameDetails!.gameData!.dateTime!),
                        style: const TextStyle(
                          color: Colors.black,
                          fontSize: 16,
                          fontFamily: 'PingFang',
                          fontWeight: FontWeight.w500,
                        ),
                      ),
                      const SizedBox(
                        height: 8,
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: [
                          Text(
                            '${_gameDetails!.gameData!.getCurrentPlayerNumber()}/${_gameDetails!.gameData!.maxPlayers}',
                            style: const TextStyle(
                                color: Colors.grey,
                                fontFamily: 'PingFang',
                                fontWeight: FontWeight.w200,
                                fontSize: 16),
                          ),
                          const SizedBox(
                            width: 5,
                          ),
                          const ImageIcon(
                            AssetImage('assets/icons/person.png'),
                            size: 24.0,
                          )
                        ],
                      ),
                    ],
                  ),
                ),
              ],
            ),
          );
        });
  }
}

我可以在此布局中改进什么以使其更好地匹配原始布局吗？

Answer 1

您可以使用 SizedBox 或 Spacer。

Answer 2

我的第一个想法是使用 SizedBox() 或 Spacer() 小部件来实现所需的间距。但是，我很快意识到这种方法对我的情况不够敏感。例如，如果标题和副标题最多只有 1 行，那么它们会靠得太近，并且位于父行的中间。尝试将最右边的列与中间的列对齐时会出现类似的问题。

我最终将 Column() 的用法与 Row() 小部件互换，以确保顶部对齐并且底部也对齐。完成后，我使用 Align() 小部件将最右边的元素限制在行尾。这是最终结果：

@override
  Widget build(BuildContext context) {
    return StreamBuilder<Tuple2<String, PickUpGameDetails>>(
        stream: _detailsBloc!.detailsUpdatesStream,
        builder: (context, snapshot) {
          if (snapshot.hasError ||
              snapshot.connectionState == ConnectionState.waiting) {
            return const SizedBox();
          } else {
            if (snapshot.data!.item1 == widget.gameId) {
              _gameDetails = snapshot.data!.item2;
            } else {
              _gameDetails = widget.details;
            }
          }
          return Container(
            padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 8),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                ClipRRect(
                  borderRadius: BorderRadius.circular(10.0),
                  child: _gameDetails!.locationInfo == null
                      ? const SizedBox()
                      : CachedNetworkImage(
                          imageUrl:
                              _gameDetails!.locationInfo!.pictures.elementAt(0),
                          width: 85,
                          height: 85,
                          fit: BoxFit.cover,
                          placeholder: (context, url) => const SizedBox(
                              child: Center(child: CircularProgressIndicator()),
                              width: 10,
                              height: 10),
                        ),
                ),
                const SizedBox(
                  width: 10,
                ),
                Expanded(
                  child: Column(
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        mainAxisSize: MainAxisSize.max,
                        children: [
                          Expanded(
                            child: Text(
                              _gameDetails!.locationInfo == null
                                  ? 'Loading...'
                                  : _gameDetails!.locationInfo!.nam,
                              style: const TextStyle(
                                  fontFamily: 'PingFang',
                                  fontWeight: FontWeight.w600,
                                  fontSize: 16),
                              maxLines: 2,
                              overflow: TextOverflow.ellipsis,
                            ),
                          ),
                          const SizedBox(
                            width: 5,
                          ),
                          Align(
                            alignment: Alignment.centerRight,
                            child: Text(
                              GameData.getGameTimestamp(
                                  _gameDetails!.gameData!.dateTime!),
                              style: const TextStyle(
                                color: Colors.black,
                                fontSize: 16,
                                fontFamily: 'PingFang',
                                fontWeight: FontWeight.w500,
                              ),
                            ),
                          ),
                        ],
                      ),
                      Row(
                          mainAxisAlignment: MainAxisAlignment.start,
                          mainAxisSize: MainAxisSize.max,
                          children: [
                            _gameDetails!.gameData!.hostInfo == null
                                ? Expanded(
                                    child: Text(
                                      _gameDetails!.gameData!.gameTypeMsg!,
                                      style: const TextStyle(
                                          color: Colors.black,
                                          fontFamily: 'PingFang',
                                          fontWeight: FontWeight.w200,
                                          fontSize: 16),
                                      maxLines: 2,
                                      overflow: TextOverflow.ellipsis,
                                    ),
                                  )
                                : Expanded(
                                    child: Text(
                                      '${_gameDetails!.gameData!.gameTypeMsg!} with ${_gameDetails!.gameData!.hostInfo!.hostNickname}.',
                                      style: const TextStyle(
                                          color: Colors.black,
                                          fontFamily: 'PingFang',
                                          fontWeight: FontWeight.w200,
                                          fontSize: 16),
                                      maxLines: 2,
                                      overflow: TextOverflow.ellipsis,
                                    ),
                                  ),
                            Align(
                              alignment: Alignment.centerRight,
                              child: Text(
                                '${_gameDetails!.gameData!.getCurrentPlayerNumber()}/${_gameDetails!.gameData!.maxPlayers}',
                                style: const TextStyle(
                                    color: Colors.grey,
                                    fontFamily: 'PingFang',
                                    fontWeight: FontWeight.w200,
                                    fontSize: 16),
                              ),
                            ),
                            const SizedBox(
                              width: 5,
                            ),
                            const ImageIcon(
                              AssetImage('assets/icons/person.png'),
                              size: 24.0,
                            )
                          ]),
                    ],
                  ),
                ),
              ],
            ),
          );
        });
  }