Блог

Как разместить виджет ниже виджета с фиксированным центром внутри контейнера? Я использую 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,
        ),
      ),
    ],
  );
}
 

Я считаю, что секрет правильного выполнения этого заключается не только в том, как вы строите «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
 ]
)
 

Если вы установите для строки start значение crossAxisAlignment, а затем отобразите столбец с надписью «без слотов» внизу, разве это не должно решить вашу проблему?

Вы могли бы использовать 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,
        ),
      ),
    ],
  );