flutter学习(1)

1.main()和runApp()

• lib/main.dart—入口文件

void main(){
runApp(MyApp())
}
//简写
void main（）=>runApp(MyApp())

• main 方法是dart的入口方法 runApp方法是flutter的入口方法 MyApp是自定义的一个组件(flutter中所有的组件都是类)

2.material.dart

• 在main.dart文件引入的快捷方式输入 fim回车import ‘package:flutter/material.dart’;
• 使用flutter必须引入该文件
• Material是一种移动端和网页端通用的视觉设计语言， Flutter 提供了丰富的 Material 风格的 widgets。

3.组件

• dart中写类的时候 ，可以省略new 关键词

import 'package:flutter/material.dart';
void main(){
runApp(new Center(
  child: new Text(
    '你好flutter',
    textDirection:TextDirection.ltr//文本对齐方式从左向右对齐
  )
));
}

• runApp方法中传入一个类,mac电脑按住command然后单击类名可以进入到对应类的底层代码
  
  可以看到Center类有一个child参数，这个参数代表它的内容
  -Text类
  

4.把flutter内容单独抽离成一个组件

• flutter的组件其实就是一个类，这个类需要继承StatelessWidget/StatefulWidget
  前期都继承自StatelessWidget
• StatelessWidget 是无状态组件,状态不可变的widget
• StatefulWidget 是有状态组件,持有的状态可能在widget生命周期改变

import 'package:flutter/material.dart';
void main(){
runApp(MyApp());
}

/*
把flutter内容单独抽离成一个组件
flutter的组件其实就是一个类，这个类需要继承StatelessWidget/StatefulWidget
前期都继承自StatelessWidget
StatelessWidget 是无状态组件,状态不可变的widget
StatefulWidget   是有状态组件,持有的状态可能在widget生命周期改变
*/
class MyApp extends StatelessWidget {
  @override
  // build 返回一个Widget 一个类就是widget
  Widget build(BuildContext context) {
    return Center(
    child:  Text(
      '你好flutter222',
      textDirection:TextDirection.ltr//文本对齐方式从左向右对齐
      )
    );
  }

}

5.改变文字颜色

class MyApp extends StatelessWidget {
  @override
  // build 返回一个Widget 一个类就是widget
  Widget build(BuildContext context) {
    return Center(
    child:  Text(
      '你好flutter222',
      textDirection:TextDirection.ltr,//文本对齐方式从左向右对齐
      style: TextStyle(
        fontSize:40.0,//dart中的数组都是double类型,所以必须加.0
        color: Colors.red,
        // color:Color.fromRGBO(244, 233, 121, 0.5)
      ),
      )
    );
  }

}

6.MaterialApp 和Sacffold

• MaterialApp许多 Material Design 的 widget 需要在 MaterialApp 中才能显现正常.一般作为顶层的widget使用

• MaterialApp:常用属性
  home:主页,
  title:标题
  color:颜色,
  theme:主题，
  routes:路由
  

• Scaffold 是 Material Design页面布局的基本实现主要属性有:
  • appBar–显示在界面顶部的一个AppBar
  • body–当前界面所显示的主要内容
  • drawer – 抽屉菜单控件

import 'package:flutter/material.dart';
void main(){
runApp(MyApp());
}

/*
把flutter内容单独抽离成一个组件
flutter的组件其实就是一个类，这个类需要继承StatelessWidget/StatefulWidget
前期都继承自StatelessWidget
StatelessWidget 是无状态组件,状态不可变的widget
StatefulWidget   是有状态组件,持有的状态可能在widget生命周期改变
*/
class MyApp extends StatelessWidget {
  @override
  // build 返回一个Widget 一个类就是widget
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            'Flutter demo'
          ),
        ),
        body: HomeContent(),
      ),
      // theme: ThemeData(
      //   primarySwatch:Colors.yellow
      // ),
    );
  }

}

class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
    child:  Text(
      '你好flutter222',
      textDirection:TextDirection.ltr,//文本对齐方式从左向右对齐
      style: TextStyle(
        fontSize:40.0,//dart中的数组都是double类型,所以必须加.0
        color: Colors.red,
        // color:Color.fromRGBO(244, 233, 121, 0.5)
      ),
      )
    );
  }
  
}

7.Container组件

• Container组件是一个容器组件相当于div元素
  
  
  官网

import 'package:flutter/material.dart';
void main(){
runApp(MyApp());
}

/*
把flutter内容单独抽离成一个组件
flutter的组件其实就是一个类，这个类需要继承StatelessWidget/StatefulWidget
前期都继承自StatelessWidget
StatelessWidget 是无状态组件,状态不可变的widget
StatefulWidget   是有状态组件,持有的状态可能在widget生命周期改变
*/
class MyApp extends StatelessWidget {
  @override
  // build 返回一个Widget 一个类就是widget
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            'Flutter demo'
          ),
        ),
        body: HomeContent(),
      ),
      // theme: ThemeData(
      //   primarySwatch:Colors.yellow
      // ),
    );
  }

}

class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
    child:  Container(
      child: Text(
        '这是一个Container组件'
      ),
      height: 200.0,
      width: 200.0,
      decoration: BoxDecoration(
        // 设置背景色
        color: Colors.yellow,
        border: Border.all(
          color: Colors.blue,
          width:2.0
        )
      ),
    )
    );
  }
  
}

8.Text组件

官网

import 'package:flutter/material.dart';
void main(){
runApp(MyApp());
}

/*
把flutter内容单独抽离成一个组件
flutter的组件其实就是一个类，这个类需要继承StatelessWidget/StatefulWidget
前期都继承自StatelessWidget
StatelessWidget 是无状态组件,状态不可变的widget
StatefulWidget   是有状态组件,持有的状态可能在widget生命周期改变
*/
class MyApp extends StatelessWidget {
  @override
  // build 返回一个Widget 一个类就是widget
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            'Flutter demo'
          ),
        ),
        body: HomeContent(),
      ),
      // theme: ThemeData(
      //   primarySwatch:Colors.yellow
      // ),
    );
  }

}

class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
    child:  Container(
      child: Text(
        '这是一个Container组件这是一个Container组件这是一个Container组件这是一个Container组件',
        textAlign: TextAlign.left,
        overflow:TextOverflow.ellipsis,
        maxLines: 2,//文本的显示行数
        // textScaleFactor: 2,//文本放大的倍数
        style: TextStyle(
          fontSize: 18.0,//文字的字体大小
          fontWeight:FontWeight.bold,//字体是否加粗
        ),
      ),
      height: 200.0,
      width: 200.0,
      decoration: BoxDecoration(
        // 设置背景色
        color: Colors.yellow,
        border: Border.all(
          color: Colors.blue,
          width:2.0
        ),
        borderRadius: BorderRadius.all(//设置圆角
           Radius.circular(8),
        ),
      ),
      // padding: EdgeInsets.all(9.0),//4个方向
      padding: EdgeInsets.fromLTRB(20, 10, 10, 10),//4个方向
      alignment: Alignment.bottomRight,//配置container组件内部元素的位置
        
      
    )
    );
  }
  
}

9.Image组件

• Image.asset， 本地图片
• Image.network 远程图片
  
  
  官网
  
• 引入外网图片

import 'package:flutter/material.dart';


void main(){
  runApp(MyApp());
}
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            'flutter APP'
          ),
        ),
        body: HomeContent(),
      ),
    );
  }
}
class HomeContent extends StatelessWidget{
@override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: Image.network(
          'https://..............',
          alignment:Alignment.topLeft,//图片位置对齐方式
          // color: Colors.blue,//设置图片的背景色 一般和colorBlendMode配合使用
          // colorBlendMode: BlendMode.screen,
          // fit:BoxFit.fill ,//全图显示，图片会被拉伸，并充分父容器
          // fit:BoxFit.contain ,//全图显示，显示原比例，可能会有空隙
          // fit:BoxFit.cover ,//用的多，显示可能拉伸，可能裁切，充满（图片要充满整个容器，还不变形）
          repeat: ImageRepeat.noRepeat,//图片是否平铺

          ),
        width:300,
        height:300,
        decoration:BoxDecoration(
          color: Colors.blue,
        )
      ),
    );
  }
}

10.圆角图片

import 'package:flutter/material.dart';


void main(){
  runApp(MyApp());
}
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            'flutter APP'
          ),
        ),
        body: HomeContent(),
      ),
    );
  }
}
class HomeContent extends StatelessWidget{
@override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width:300,
        height:300,
        decoration:BoxDecoration(
          color: Colors.blue,
          // borderRadius: BorderRadius.all(//1.实现圆角
          //   Radius.circular(150),
          // )
          borderRadius: BorderRadius.circular(150),//2.也可以实现圆角
          image: DecorationImage(
            image: NetworkImage('xxxxxxx'),
            fit: BoxFit.cover
          )
        )
      ),
    );
  }
}

• ClipOval

import 'package:flutter/material.dart';


void main(){
  runApp(MyApp());
}
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            'flutter APP'
          ),
        ),
        body: HomeContent(),
      ),
    );
  }
}
class HomeContent extends StatelessWidget{
@override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
       child: ClipOval(//不管是什么样的图片ClipOval都会根据图片大小处理成圆形或者椭圆形图片
         child:Image.network(
           'https://epdc-yushan.elinkservice.cn/files-pro/20200521/ae8757973df34aca8979d8da6202a073.jpg',
           width: 100,
           height: 100,
           fit: BoxFit.cover,
           ),
       ),
      ),
    );
  }
}

11.本地图片的引入

• 配置图片
  
• 引入

import 'package:flutter/material.dart';


void main(){
  runApp(MyApp());
}
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            'flutter APP'
          ),
        ),
        body: HomeContent(),
      ),
    );
  }
}
class HomeContent extends StatelessWidget{
@override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: Image.asset(
          'images/ava.png',
          //  fit: BoxFit.cover,
        ),
        width: 300.0,
        height: 300.0,
        decoration: BoxDecoration(
          border:Border.all(
            color: Colors.red,
            width: 2.0
          )
        ),
      ),
    );
  }
}