Flutter：如何将小部件放置在容器内固定居中小部件下方

Question

如何将一个Widget放置在Container中固定居中的Widget下方？我正在使用 GridView 水平显示小部件。 GridView 项将有一个文本小部件，每次在屏幕中都必须将其固定在居中。我必须在该居中小部件下方放置一个文本小部件。

参考截图：

添加我目前尝试的GridView项的构建方法代码。但是文本小部件没有居中。我得到的输出。如何修复这部分？

@override
Widget build(BuildContext context) {
  return Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      CustomText(
        (dayModel?.date?.day ?? "").toString(),
        AppTextStyle.Body,
        customColor: _getColorBasedOnStyle(
          dayModel.style,
        ),
      ),
      Visibility(
        visible: dayModel?.style == CalendarDayStyles.NOT_AVAILABLE,
        child: CustomText(
          Strings.no_slots_label,
          AppTextStyle.SublineForCalendar,
          customColor: AppColors.BLACK_20,
        ),
      ),
    ],
  );
}

Answer 1

如果您将行的 crossAxisAlignment 设置为 start，然后在下面显示一个“无槽”的列，这不应该解决您的问题吗？

Answer 2

您可以使用 CrossAxisAlignment.center:

Column(
 mainAxisAlignment: MainAxisAlignment.center,
 crossAxisAlignment: CrossAxisAlignment.center,
),

完整代码段：

@override
Widget build(BuildContext context) {
  return Column(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      CustomText(
        (dayModel?.date?.day ?? "").toString(),
        AppTextStyle.Body,
        customColor: _getColorBasedOnStyle(
          dayModel.style,
        ),
      ),
      Visibility(
        visible: dayModel?.style == CalendarDayStyles.NOT_AVAILABLE,
        child: CustomText(
          Strings.no_slots_label,
          AppTextStyle.SublineForCalendar,
          customColor: AppColors.BLACK_20,
        ),
      ),
    ],
  );

Answer 3

我相信正确执行此操作的秘诀不仅在于构建“6”的方式，还在于构建“5”和“7”的方式。

例如您可以将它们中的每一个构建为列，其中 3 个框彼此重叠，伪代码：

Column(
 children: [
  SizedBox(height: fixedHeight, child: empty)
  SizedBox(height: fixedHeight, child: Text("5"))  // or "6" or "7"
  SizedBox(height: fixedHeihgt, child: empty) // or booking status
 ]
)

或如果我们必须避免使用 fixedHeight 的其他方法是在 Column 小部件[=14= 中使用 Expanded 小部件]

Column(
 children: [
  Expanded(child: Container()),
  Expanded(child: Center(child : Text("5"))), // or "6" or "7"
  Expanded(child: Center(child : Text("No Slots"))) // or booking status
 ]
)

Flutter：如何将小部件放置在容器内固定居中小部件下方

Flutter : How to place a Widget below fixed Centered Widget inside a Container

widget

flutter

flutter-layout