Flutter中如何让文本容器占满整个屏幕宽度？

你遇到的问题核心是Column默认的crossAxisAlignment为CrossAxisAlignment.center，即便用了Expanded，容器仍会根据内部文本宽度自适应，而非占满水平方向可用空间。另外SizedBox.expand会强制组件占满父级所有空间，但在无固定高度的Column中会触发无限约束的渲染错误，所以不能这么用。

给你两个简单可行的解决方案：

方案一：修改Column的crossAxisAlignment #

给外层Column添加crossAxisAlignment: CrossAxisAlignment.stretch，让所有子组件自动占满水平方向可用宽度：

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Recapio"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.stretch, // 添加此行
          children: [
            Text(
              "Confidence: $_confidence",
              style: const TextStyle(fontSize: 18),
              textAlign: TextAlign.center, // 可选：让顶部文本保持居中
            ),
            Expanded(
              child: Container(
                padding: const EdgeInsets.all(12.0),
                decoration: BoxDecoration(
                  color: Colors.grey[200],
                  borderRadius: BorderRadius.circular(10.0),
                ),
                child: SingleChildScrollView(
                  child: Text(
                    _transcription,
                    style: const TextStyle(fontSize: 18),
                  ),
                ),
              ),
            ),
            const SizedBox(height: 20),
            ElevatedButton.icon (
              onPressed: _toggleListening,
              icon: Icon(_isListening ? Icons.mic : Icons.mic_off),
              label: Text(_isListening ? "Stop Listening" : "Start Listening"),
            )
          ],
        ),
      ),
    );
  }

注：添加该属性后，顶部的置信度文本会默认左对齐，如需保持居中，给对应Text组件加上textAlign: TextAlign.center即可。

方案二：给Container设置width: double.infinity #

若不想修改整个Column的对齐逻辑，仅让文本容器占满宽度，直接给Container添加width: double.infinity：

Expanded(
  child: Container(
    width: double.infinity, // 添加此行
    padding: const EdgeInsets.all(12.0),
    decoration: BoxDecoration(
      color: Colors.grey[200],
      borderRadius: BorderRadius.circular(10.0),
    ),
    child: SingleChildScrollView(
      child: Text(
        _transcription,
        style: const TextStyle(fontSize: 18),
      ),
    ),
  ),
),

这个方法仅影响当前容器，不会改变其他组件的对齐方式，灵活性更强。

两种方案都能解决你的问题，可根据整体布局需求选择。

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