[英]Flutter : How to place a Widget below fixed Centered Widget inside a Container
How to place a Widget below fixed Centered Widget inside a Container?如何将小部件放置在容器内的固定居中小部件下方? I am using a GridView to show widgets horizontally.
我正在使用 GridView 水平显示小部件。 GridView item will have a Text Widget which has to be fixed at the Centered everytime in the screen.
GridView 项目将有一个文本小部件,每次在屏幕上都必须固定在居中。 I have to place a Text widget below that Centered Widget.
我必须在该居中小部件下方放置一个文本小部件。
Adding the build method code of the GridView item I have tried till now.添加到现在我尝试过的GridView项目的构建方法代码。 But the Text Widget is not getting centered.
但是文本小部件没有居中。 The output I am getting.
我得到的 output。 How to fix this part?
如何修复这部分?
@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,
),
),
],
);
}
I believe the secret to doing this right is not only in how you build "6", but also in how you build "5" and "7".我相信做到这一点的秘诀不仅在于如何构建“6”,还在于如何构建“5”和“7”。
Eg you could build every one of them as column with 3 boxes on top of each other, pseudocode:例如,您可以将它们中的每一个构建为具有 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
]
)
or other way of doing it if we have to avoid using fixedHeight is by using the Expanded
Widget inside the Column
Widget或者如果我们必须避免使用 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
]
)
If you set crossAxisAlignment of the row to start
and then show a column with "no slots" underneath, shouldn't this fix your issue?如果您将行的 crossAxisAlignment 设置为
start
,然后在下面显示一个“无槽”的列,这不应该解决您的问题吗?
You could use the CrossAxisAlignment.center
:您可以使用
CrossAxisAlignment.center
:
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
),
Full snippet code:完整的片段代码:
@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,
),
),
],
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.