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

【问题标题】：Flutter : How to place a Widget below fixed Centered Widget inside a ContainerFlutter：如何将小部件放置在容器内的固定居中小部件下方
【发布时间】：2021-03-26 08:27:29
【问题描述】：

如何将 Widget 放置在 Container 内固定的 Centered 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,
        ),
      ),
    ],
  );
}

【问题讨论】：

标签： flutter widget flutter-layout

【解决方案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，其他方法是在 Expanded 小部件内使用 Column 小部件

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

【讨论】：

@rgisi 通过使用扩展小部件更新了答案。谢谢你的想法，它奏效了。

【解决方案2】：

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

【讨论】：

我没有在上述小部件中使用 Row

【解决方案3】：

你可以使用CrossAxisAlignment.center:

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

完整的sn-p代码：

@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,
        ),
      ),
    ],
  );

【讨论】：