水平对齐项目 ListView.builder - Flutter

Question

我有这个代码：

FutureBuilder(
    future: _data,
    builder: (context, AsyncSnapshot snapshot) {
      if (!snapshot.hasData) {
        return const Center(child: CustomLoadingAnimation());
      } else {
        var data = snapshot.data;
        return Container(
              decoration: BoxDecoration(
                  color: primaryFlashColor,
                  borderRadius: BorderRadius.circular(20)),
              height: 14.h,
              width: 100.w,
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: ListView.builder(
                    shrinkWrap: true,
                    scrollDirection: Axis.horizontal,
                    itemCount: data.length,
                    itemBuilder: (context, index) {
                      return ThreadIcon(
                          title: data[index]['title'],
                          url: data[index]['pic']);
                    }),
              ),
            );
      }
    })

还有这个预览：

如您所见，第一项只有一行标题，所以图像低于其他项。

有什么想法可以帮助解决这个问题吗？

编辑：这是我的 ThreadIcon 小部件：如您所见，有 2 个 maxLine。但是当标题只在 1 行时，项目没有水平对齐

Padding(
  padding: const EdgeInsets.only(left: 8.0, right: 8.0),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Container(
        height: 50,
        width: 50,
        decoration: BoxDecoration(
          border: Border.all(width: 2, color: customWhite),
          borderRadius: BorderRadius.circular(100),
        ),
        child: ClipRRect(
            borderRadius: BorderRadius.circular(100),
            child: Image.network(
              url.toString(),
              fit: BoxFit.cover,
            )),
      ),
      SizedBox(
        height: 1.h,
      ),
      SizedBox(
        width: 45,
        child: Text(
          title.toString(),
          style: const TextStyle(
            fontWeight: FontWeight.w800,
            fontSize: 11,
          ),
          maxLines: 2,
          overflow: TextOverflow.ellipsis,
          textAlign: TextAlign.center,
        ),
      )
    ],
  ),
);

Answer 1

使用

Row

将项目对齐，两侧间距相等（如果您确定项目的长度）。

ListView

将占用可用空间，并会不断添加项目。

Answer 2

好的，所以我需要在我的 ThreadIcon 小部件中放置一个固定的高度：

Padding(
  padding: const EdgeInsets.only(left: 8.0, right: 8.0),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Container(
        height: 50,
        width: 50,
        decoration: BoxDecoration(
          border: Border.all(width: 2, color: customWhite),
          borderRadius: BorderRadius.circular(100),
        ),
        child: ClipRRect(
            borderRadius: BorderRadius.circular(100),
            child: Image.network(
              url.toString(),
              fit: BoxFit.cover,
            )),
      ),
      SizedBox(
        height: 1.h,
      ),
      SizedBox(
        width: 45,
        height: 30, // here add fixed height
        child: Text(
          title.toString(),
          style: const TextStyle(
            fontWeight: FontWeight.w800,
            fontSize: 11,
          ),
          maxLines: 2,
          overflow: TextOverflow.ellipsis,
          textAlign: TextAlign.center,
        ),
      )
    ],
  ),
);