Flutter把内容单独抽离成一个组件

发布时间：2026-01-01 14:27:57

Flutter把内容单独抽离成一个组件

在Flutter中自定义组件其实就是一个类，这个类需要继承StatelessWidgevStatefulWidget

前期我们都继承StatelessWidget。后期给大家讲StatefuIWidget的使用。

StatelessWidget是无状态组件，状态不可变的

widgetStatefulWidget是有状态组件，持有的状态可能在widget生命周期改变

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('你好Flutter')),
        body: const MyApp(),
      ),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text(
        '你好Flutter 我是一个自定义组件',
        textDirection: TextDirection.ltr,
        style: TextStyle(color: Colors.red, fontSize: 40R),
      ),
    );
  }
}

import 'package:flutter/material.dart'
导入Flutter的Material组件库，提供Material Design风格的UI组件
main()函数
应用入口点，通过runApp()启动Flutter应用
MaterialApp
根组件，提供Material Design应用的基本框架：

home参数：设置首页内容
自动处理路由、主题等基础配置

Scaffold
页面骨架组件，提供标准页面结构：

appBar：顶部导航栏，显示标题"你好Flutter"
body：页面主体内容，使用自定义的MyApp组件

MyApp自定义组件

textDirection: TextDirection.ltr：强制从左到右的文本方向
style：设置红色字体、40px大小

继承StatelessWidget表示无状态组件
build方法返回居中(Center)的文本(Text)：

运行效果：显示带有蓝色AppBar的页面，居中显示红色大字体的"你好Flutter 我是一个自定义组件"文本。