Flutter4-抽离组件，自定义组件

 自定义组件就一个类，需要继承StatelessWidget/StatefuleWidget,初期都是前者

StatelessWidget是无状态组件，在生命周期状态不可变，后者可变

快捷键： importm   stateless

import 'package:flutter/material.dart';

void main() {

  runApp(MaterialApp(   //MaterialApp所有组件的根组件

    home:Scaffold(

      appBar: AppBar(title:const Text("www.i7i8i9.com") ), //title是widget类型，所以后面要加Text

     

      body: const MyApp(),

     

      )

 

  ));

}

 

class MyApp extends StatelessWidget {

  const MyApp({super.key});

  @override

  Widget build(BuildContext context) {

    return const Center(  //注意const加上意义是只有一份，也可以不加，会有语法检查提示

              child: Text("你好啊, www.i7i8i9.com",textDirection: TextDirection.ltr,//这个都可以通过构造函数分析

              style:TextStyle( //TextStyle是一个类，通过命名函数传值

              color: Colors.red,

              // color:Color.fromRGBO(244,244, 122, 1),

                fontSize: 40,

      ),),  //因为Center加const,这里可以不加

 

  );

  }

}

最基本的结构：

void main() {

  runApp(

    MaterialApp(

      home:Scaffold(

        appBar: AppBar(title: const Text("www.i7i8i9.com"),),

        body: const MyApp(),

      ),

    )

  );

}

//单独抽成组件需要使用stateless,快捷直接输入

class MyApp extends StatelessWidget {

  const MyApp({super.key});

  @override

  Widget build(BuildContext context) {

    return const Center(

          child:Text("你好 ~~i7i8i9"),

         

         

           );

  }

}