Flutter中如何让TextField宽度与上方Custom组件内红色容器宽度自适应匹配

核心实现思路 #

使用IntrinsicWidth包裹需要对齐宽度的子组件的共同父容器，组件会自动将所有子元素的宽度同步为父容器内最宽子元素的宽度，即使内部红色容器替换为被Flexible包裹的动态尺寸Image，或者键盘弹出触发布局重绘，都可以自动保持宽度一致。

代码修改点 #

1. 修正原代码笔误：Custom类构造函数错误命名为Face，同步适配空安全写法
2. 给Custom组件内的Column外层套IntrinsicWidth
3. 调整TextField的InputDecoration默认内边距，避免宽度出现细微偏差

修改后完整代码 #

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: HomePage(),
    ));

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  HomePageWithState createState() => HomePageWithState();
}

class HomePageWithState extends State<HomePage> {
  String path = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Test "),
      ),
      body: const Column(
        children: [Custom()],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: 'Select',
        child: const Icon(Icons.image),
      ),
    );
  }
}

class Custom extends StatelessWidget {
  // 修正原构造函数命名错误
  const Custom({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.grey,
      // 新增IntrinsicWidth包裹Column
      child: IntrinsicWidth(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            // 该容器后续替换为Flexible包裹的Image也可正常适配
            Container(
              height: 50,
              width: 250,
              color: Colors.red,
            ),
            TextField(
              decoration: InputDecoration(
                hintText: 'No Text',
                // 去掉默认内边距，保证宽度完全对齐
                isDense: true,
                contentPadding: const EdgeInsets.symmetric(vertical: 12, horizontal: 0),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者Radha Kumari