flutter 起步程序解析

本是古典何须时尚 2021-07-24 16:16 409阅读 0赞

flutter中的类对象不需要new 
    
    1、导入
    import 'package:flutter/material.dart';
    
    2、main方法中调用runApp方法,参数是自定义的组件(类)
    
    	void main(){
    	  runApp(App());
    	}
    	
    3、自定义组件需要继承StatelessWidget,并重写build方法,返回一个Widget组件
    	其中
    		返回组件一般设置为MaterialApp组件作为根容器,设置基本布局和顶部导航栏
    			home:设置导航栏信息
    			theme:设置主题,包括导航栏和屏幕边框
    				其中
    					导航栏和页面内容通过Scaffold设置
    						appBar:设置顶部导航栏信息
    						body:设置导航栏以下的内容

代码示例:

import 'package:flutter/material.dart';
    
    void main(){ 
      runApp(App());
    }
    
    class App extends StatelessWidget{ //继承无状态组件
      @override
      Widget build(BuildContext context) { 
       
       //返回组件
        return MaterialApp(
          home:Scaffold(  //Scaffold设置当导航栏等组件 
            appBar: AppBar(  //顶部导航栏
            title:Text('flutter demo') //标题
            ),
            body:Home()   //主题 导航栏以下的内容
          ),
          theme:ThemeData(  //主题颜色,导航栏以及屏幕边框
            primarySwatch: Colors.yellow
          )
        );
      } 
    
    }
    
    //自定义内容组件
    class Home extends StatelessWidget{ 
      @override
      Widget build(BuildContext context) { 
        
        return Center( //居中组件
          child:Text(
            'hello world2',
            textDirection:TextDirection.ltr, //文字对齐方式
            style:TextStyle(fontSize: 40.0, //数字都是浮点类型,写整数要报错
                color:Colors.red
                //color:Color.fromRGBO(x,x,x,x)
             )
          )
        );
      }
    }

效果图:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/d51c0abfb001480c885170fe434ae09b.png