Flutter布局问题：如何让Hello与用户姓名在同一行显示？

我搞不懂哪里出问题了，这事按理说应该很简单，但写代码时总会碰到麻烦。我想让“Hello 名 姓”显示在同一行，却完全没思路，求指点。当前代码如下：

@override
  Widget build(BuildContext context) {
    return NefertitiSheetView(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            S.of(context).welcome_hello,
            style: Theme.of(context).textTheme.titleMedium,
          ),
          BlocBuilder<RiderProfileCubit, GetCurrentOrder$Query$Rider?>(
            builder: (context, state) {
              return Text(
                "${state?.firstName != null ? " ${state!.firstName!} ${state!.lastName!}" : ""}!",
                style: Theme.of(context).textTheme.labelMedium,
              );
            },
          ).pOnly(bottom: 2),

（截图显示“Hello”与姓名文本垂直分两行排列）

解决方法 #

你现在用的Column组件是垂直排列子元素的，这就是文本分两行的原因。要让它们在同一行，有以下几种可行方案：

方案1：用Row组件包裹两个Text #

将两个Text放到Row中，实现水平排列：

@override
Widget build(BuildContext context) {
  return NefertitiSheetView(
    child: Row(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Text(
          S.of(context).welcome_hello,
          style: Theme.of(context).textTheme.titleMedium,
        ),
        BlocBuilder<RiderProfileCubit, GetCurrentOrder$Query$Rider?>(
          builder: (context, state) {
            return Text(
              "${state?.firstName != null ? " ${state!.firstName!} ${state!.lastName!}" : ""}!",
              style: Theme.of(context).textTheme.labelMedium,
            );
          },
        ),
      ],
    ).pOnly(bottom: 2),
  );
}

方案2：合并为单个RichText组件（推荐，保留不同样式） #

把Hello和姓名内容整合，用RichText分别设置不同文本的样式：

@override
Widget build(BuildContext context) {
  return NefertitiSheetView(
    child: BlocBuilder<RiderProfileCubit, GetCurrentOrder$Query$Rider?>(
      builder: (context, state) {
        final namePart = state?.firstName != null 
            ? " ${state!.firstName!} ${state!.lastName!}!" 
            : "!";
        return RichText(
          text: TextSpan(
            children: [
              TextSpan(
                text: S.of(context).welcome_hello,
                style: Theme.of(context).textTheme.titleMedium,
              ),
              TextSpan(
                text: namePart,
                style: Theme.of(context).textTheme.labelMedium,
              ),
            ],
          ),
        );
      },
    ).pOnly(bottom: 2),
  );
}

方案3：用Wrap组件适配小屏幕 #

如果担心窄屏时文本溢出，可用Wrap替代Row，空间足够时保持同行，不足时自动换行：

@override
Widget build(BuildContext context) {
  return NefertitiSheetView(
    child: Wrap(
      crossAxisAlignment: WrapCrossAlignment.center,
      children: [
        Text(
          S.of(context).welcome_hello,
          style: Theme.of(context).textTheme.titleMedium,
        ),
        BlocBuilder<RiderProfileCubit, GetCurrentOrder$Query$Rider?>(
          builder: (context, state) {
            return Text(
              "${state?.firstName != null ? " ${state!.firstName!} ${state!.lastName!}" : ""}!",
              style: Theme.of(context).textTheme.labelMedium,
            );
          },
        ),
      ],
    ).pOnly(bottom: 2),
  );
}

内容的提问来源于stack exchange，提问作者Ahmed AlNeaimy