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

Flutter开发中如何在界面左侧添加Text widget

界面参考

实现方案

你可以用Flutter自带的Row布局组件实现需求,Row默认会从左到右水平排列子组件,把你要显示的Text放在Row的第一个子组件位置,就会自动出现在界面左侧。

下面是完整的最简示例代码:

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("左侧Text示例")),
        body: Row(
          // 子组件默认从左到右排列
          children: const [
            // 第一个子组件就是左侧的Text
            Text("我是左侧的文本"),
            // Expanded用来占满Row剩余空间,避免后续组件布局溢出
            Expanded(child: Placeholder()) // 这里用占位符代替你原有界面的其他内容
          ],
        ),
      ),
    );
  }
}

如果你的界面已经有现成的布局结构,也可以用Align组件包裹Text,强制让它左对齐:

Align(
  alignment: Alignment.centerLeft, // 左对齐,垂直方向居中
  child: Text("我是左侧的文本"),
)
  • 如果你需要调整左侧Text和其他内容的间距,可以在Text外包裹Padding组件设置边距
  • 如果Text内容太长超出一行,可以给Text设置maxLines和overflow属性处理文本溢出

内容的提问来源于stack exchange,提问作者Thiroshan Suthakar

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.09.26 18:36:10