Flutter不使用MaterialApp实现三元素垂直居中布局报错求助

错误原因 #

你遇到的No Directionality widget found错误，是因为Text组件需要Directionality来确定文本的排版方向（比如从左到右/从右到左），MaterialApp会自动提供这个组件，你不用它的话就得手动添加。

另外你的布局逻辑也有问题：要实现三个元素上下排列，应该用Column作为主容器，而不是用Row嵌套Column——Row是用来做横向排列的，这样写会让三个Column并排显示，和你要的上下排列不符。

修正后的代码 #

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Directionality(
      // 指定文本排版方向，这里用从左到右
      textDirection: TextDirection.ltr,
      child: Container(
        color: Colors.black,
        // 让Container占满整个屏幕，这样内部的Column才能实现垂直居中
        constraints: const BoxConstraints.expand(),
        child: Column(
          // 垂直方向居中对齐
          mainAxisAlignment: MainAxisAlignment.center,
          // 如果需要水平居中，可以加上下面这行
          // crossAxisAlignment: CrossAxisAlignment.center,
          children: const [
            Text('ELE1', style: TextStyle(color: Colors.white)),
            Text('ELE2', style: TextStyle(color: Colors.white)),
            Text('ELE3', style: TextStyle(color: Colors.white)),
          ],
        ),
      ),
    );
  }
}

关键改动说明 #

1. 添加Directionality：直接作为根组件，给Text提供必要的排版方向，解决报错。
2. 替换Row为Column：用Column实现三个元素的上下排列。
3. 让Container占满屏幕：通过constraints: BoxConstraints.expand()让容器铺满整个窗口，否则Column只会包裹内容，无法实现垂直居中。
4. 设置Column的mainAxisAlignment：MainAxisAlignment.center让子元素在垂直方向居中。

如果你原本想给每个元素单独套Column（比如后续要给每个元素加更多子组件），也可以保留嵌套，只要主容器是Column就行：

children: const [
  Column(children: [Text('ELE1', style: TextStyle(color: Colors.white))]),
  Column(children: [Text('ELE2', style: TextStyle(color: Colors.white))]),
  Column(children: [Text('ELE3', style: TextStyle(color: Colors.white))]),
],

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