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

Question

如何將小部件放置在容器內的固定居中小部件下方？ 我正在使用 GridView 水平顯示小部件。 GridView 項目將有一個文本小部件，每次在屏幕上都必須固定在居中。 我必須在該居中小部件下方放置一個文本小部件。

參考截圖：

添加到現在我嘗試過的GridView項目的構建方法代碼。 但是文本小部件沒有居中。 我得到的 output。 如何修復這部分？

@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

我相信做到這一點的秘訣不僅在於如何構建“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 Widget 中使用Expanded Widget

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
 ]
)

Answer 2

如果您將行的 crossAxisAlignment 設置為start ，然后在下面顯示一個“無槽”的列，這不應該解決您的問題嗎？

Answer 3

您可以使用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,
        ),
      ),
    ],
  );