You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter入门求助:如何在现有代码中添加新的Text组件?

在Flutter中添加多个Text组件的解决方案

Flutter里像Center这类组件只能包含一个子组件,直接在Center下加第二个Text会报错。你需要用支持多子节点的布局组件(比如Column、Row或Wrap)来包裹多个Text,再把这个布局组件作为Center的child。

下面是修改后的完整代码,以垂直排列两个Text为例:

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.lightBlue,
        scaffoldBackgroundColor: const Color(0xFFb4c8ea),
      ),
      home: const MyText(),
    );
  }
}

class MyText extends StatelessWidget {
  const MyText({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        // 把单个Text替换为Column,用来垂直排列多个组件
        child: Column(
          // 让子组件在垂直方向居中
          mainAxisAlignment: MainAxisAlignment.center,
          // 水平方向居中对齐
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            // 原有的Text组件
            Text(
              "RAYCAN",
              style: TextStyle(
                color: const Color(0xFF69418b),
                height: -2,
                fontStyle: FontStyle.normal,
                fontWeight: FontWeight.bold,
                fontSize: 58,
                letterSpacing: 2,
                wordSpacing: 1,
                fontFamily: "LilitaOne",
              ),
            ),
            // 添加的第二个Text组件,可自定义样式
            Text(
              "欢迎学习Flutter",
              style: TextStyle(
                color: Colors.deepPurple,
                fontSize: 24,
                fontWeight: FontWeight.w500,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

关键修改点:

  • 将原来Center的child: Text(...)替换为child: Column(...)
  • 在Column的children数组中添加你需要的所有Text组件
  • 通过mainAxisAlignment和crossAxisAlignment控制子组件的对齐方式

其他可选布局方式:

  • 如果需要水平排列两个Text,把Column换成Row即可
  • 如果需要文本自动换行(比如内容过长时),可以用Wrap组件替代Column/Row

内容的提问来源于stack exchange,提问作者2Shin

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.02 11:21:01