如何让TextFormField宽度与上方Expanded组件宽度对齐？

问题出在TextFormField的InputDecoration使用了icon属性，这个图标会显示在输入框外部，挤压输入框的有效宽度，再加上容器的padding，导致输入框整体宽度和图片不一致。以下是两种简单的解决方式：

方式一：使用prefixIcon替代icon（推荐） #

将图标放在输入框内部，不会影响输入框的整体宽度，同时保持和图片的对齐：

Widget build(BuildContext context) {
return Scaffold(
  body: SafeArea(
    top: true,
    child: Column(
      children: [
        Expanded(
          flex: 6,
          child: GestureDetector(
            child: Hero(
              tag: 'matchedPerson',
              child: Image.network(
                widget.imageUrl,
                fit: BoxFit.cover,
              ),
            ),
            onTap: () {
              Navigator.of(context).pop();
            },
          ),
        ),
        Expanded(
          flex: 2,
          child: Container(
            width: double.infinity,
            padding: EdgeInsets.all(10),
            child: TextFormField(
              controller: _textController,
              autofocus: true,
              maxLines: null,
              expands: true,
              decoration: InputDecoration(
                prefixIcon: Icon(Icons.send), // 替换icon为prefixIcon
                hintText: 'Your message here',
                border: OutlineInputBorder(),
                contentPadding: EdgeInsets.symmetric(vertical: 15), // 调整内部垂直padding优化排版
              ),
            ),
          ),
        ),
        Expanded(
          flex: 1,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              ElevatedButton(
                onPressed: () {},
                child: const Text('Button 1'),
              ),
              ElevatedButton(
                onPressed: () {},
                child: const Text('Button 2'),
              ),
            ],
          ),
        ),
      ],
    ),
  ),
);
}

方式二：统一图片和输入框的边距 #

如果希望保留icon在外的样式，可以给图片也添加和输入框容器相同的padding，让两者的可视区域宽度一致：

Widget build(BuildContext context) {
return Scaffold(
  body: SafeArea(
    top: true,
    child: Column(
      children: [
        Expanded(
          flex: 6,
          child: Padding(
            padding: EdgeInsets.all(10), // 给图片添加相同padding
            child: GestureDetector(
              child: Hero(
                tag: 'matchedPerson',
                child: Image.network(
                  widget.imageUrl,
                  fit: BoxFit.cover,
                ),
              ),
              onTap: () {
                Navigator.of(context).pop();
              },
            ),
          ),
        ),
        Expanded(
          flex: 2,
          child: Container(
            width: double.infinity,
            padding: EdgeInsets.all(10),
            child: TextFormField(
              controller: _textController,
              autofocus: true,
              maxLines: null,
              expands: true,
              decoration: InputDecoration(
                icon: Icon(Icons.send),
                hintText: 'Your message here',
                border: OutlineInputBorder(),
              ),
            ),
          ),
        ),
        Expanded(
          flex: 1,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              ElevatedButton(
                onPressed: () {},
                child: const Text('Button 1'),
              ),
              ElevatedButton(
                onPressed: () {},
                child: const Text('Button 2'),
              ),
            ],
          ),
        ),
      ],
    ),
  ),
);
}

两种方式中，方式一更符合常规交互设计，图标在输入框内部不会破坏整体布局的对齐性。

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