Flutter 使用扩展的 TextField 定位小部件

您遇到的问题似乎与TextField的默认填充有关.

这就是我实现的输出布局，我相信这就是你想要的:

请参阅下面的Widget.build方法(注释代码):

@override
Widget build(BuildContext context) {
  /// Define common properties to easily apply them to different components.
  const style = TextStyle(fontSize: 20.0);
  const separator = SizedBox(width: 16.0);
  const textAlign = TextAlign.right;

  const textFieldDecoration = InputDecoration(
    hintStyle: style,

    /// IMPORTANT: We remove the default TextField padding.
    contentPadding: EdgeInsets.zero,
    border: InputBorder.none,
  );

  /// Dynamically get the size of the largest label in order to properly align
  /// based on the widest label.
  ///
  /// Note that we pass the [style] that we will use to properly calculate the
  /// size.
  ///
  /// This is useful if you use localized text, as it will allow proper
  /// layout/alignment.
  /// Example: [localization.title, localization.description].map(...)
  final maxLabelWidth = ["Title", "Description"]
        .map((e) => e.intrinsicSize(context: context, style: style).width)
        .reduce((a, b) => a > b ? a : b);

  return Column(
    /// The column should occupy as much horizontal space as possible.
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: [
      Row(
        children: [
          /// Our first label is wrapped with our determined max label width.
          SizedBox(
            width: maxLabelWidth,
            child: const Text("Title", textAlign: textAlign, style: style),
          ),
          separator,
          Expanded(
            child: TextField(
              decoration: textFieldDecoration.copyWith(hintText: "Required"),
              style: style,
            ),
          ),
        ],
      ),
      const Divider(height: 24.0),
      Row(
        /// You had it right, we must align to the start.
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          SizedBox(
            width: maxLabelWidth,
            child: const Text(
              "Description",
              textAlign: textAlign,
              style: style,
            ),
          ),
          separator,
          const Expanded(
            child: TextField(
              decoration: textFieldDecoration,
              style: style,
              textAlign: TextAlign.justify,
              maxLines: null,
            ),
          ),
        ],
      ),
    ],
  );
}

intrinsicSize功能的实现:

Size intrinsicSize({
  BuildContext? context,
  double maxWidth = double.infinity,
  int? maxLines,
  TextStyle? style,
}) {
  final double textScaleFactor;
  final TextDirection textDirection;

  if (context == null) {
    textScaleFactor = 1.0;
    textDirection = TextDirection.ltr;
  } else {
    textScaleFactor = MediaQuery.of(context).textScaleFactor;
    textDirection = Directionality.of(context);
  }

  return (TextPainter(
    text: TextSpan(text: this, style: style),
    textScaleFactor: textScaleFactor,
    textDirection: textDirection,
    maxLines: maxLines,
  )..layout(maxWidth: maxWidth))
      .size;
}