flutter学习之基础组件（一）

flutter学习之基础组件（一）

主要学习Center 组件、Text 组件、MaterialApp 组件、Scaffold 组件、Image组件(以代码为主)

---

---

一、Flutter 目录结构

主要几个文件夹的作用

二、Flutter 入口文件、入口方法

每创建一个flutter项目，lib目录下都有一个 main.dart 文件，这个文件就是flutter的入口文件，执行方法runApp就可以把代码运行到手机或者模拟器上

void main(){ runApp(MyApp());
}
也可以简写
void main()=>runApp(MyApp());

三、Center 组件

import 'package:flutter/material.dart';
void main(){
runApp(Center( child: Text(
"我是一个文本内容", textDirection: TextDirection.ltr,
), 
));
}

四、自定义组件

在  Flutter  中自定义组件其实就是一个类，这个类需要继承 StatelessWidget/StatefulWidget。
StatelessWidget  是无状态组件，状态不可变的  widget
StatefulWidget  是有状态组件，持有的状态可能在  widget  生命周期改变

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build return Center(
    child:
    Text(
      "我是一个文本内容", textDirection: TextDirection.ltr,
      textDirection: TextDirection.ltr, style: TextStyle(
        fontSize: 40.0,
        fontWeight: FontWeight.bold, // color: Colors.yellow
        color: Color.fromRGBO(255, 222, 222, 0.5)
    ),);
  }
}

五、件用 MaterialApp、Scaffold、Container、Text组件装饰App

1.MaterialApp

MaterialApp  是一个方便的  Widget，它封装了应用程序实现  Material  Design  所需要的 一些  Widget。一般作为顶层  widget  使用
常用的属性：
		home（主页） 
		title（标题） 
		color（颜色） 
		theme（主题）
		routes（路由）

2.Scaffold

Scaffold是Material Design 布局结构的基本实现 。此类提供了用于显示drawer 、 snackbar和底部sheet的API。
Scaffold    有下面几个主要属性：
	appBar  -    显示在界面顶部的一个AppBar。
	body  -   当前界面所显示的主要内容Widget。 
	drawer  -    抽屉菜单控件。

3.Text

下面是TextStyle的参数：

4.Container

import 'package:flutter/material.dart';

/**
 * Container组件 和 Text组件
 */
class TestOne extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text("flutter demo"),
          ),
          body: HomeContent()),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      // child: Text("你好 flutter"),
      child: Container(
        child: Text(
          "你好 flutter fdssddfd是豆腐干豆腐干大范甘迪豆腐干豆腐干d",
          textAlign: TextAlign.center,
          //位置
          style: TextStyle(
            fontSize: 20.0,
            color: Colors.cyan,
            fontWeight: FontWeight.bold,
            //设置字体加粗
            fontStyle: FontStyle.italic,
            //设置字体倾斜
            decoration: TextDecoration.lineThrough,
            decorationColor: Colors.white,
            decorationStyle: TextDecorationStyle.dashed,
            letterSpacing: 5.0, //字间距
          ),
          overflow: TextOverflow.clip,
          //设置文字超出一行的属性
          maxLines: 2,
          textScaleFactor: 1.2, //设置字体显示倍率
        ),
        height: 300.0,
        width: 200.0,
        //设置背景颜色
        decoration: BoxDecoration(
          color: Colors.yellow,
          //边框颜色
          border: Border.all(color: Colors.blue, width: 2.0),
          borderRadius: BorderRadius.all(
              // Radius.circular(150)   //圆形
              Radius.circular(20)), //设置圆角
        ),
        //     padding:  EdgeInsets.all(5.0),
        padding: EdgeInsets.fromLTRB(5.0, 0.0, 5.0, 5.0),
        // transform: Matrix4.translationValues(20, 10, 10),    //设置动画.
        alignment: Alignment.center, //设置位置
      ),
    );
  }
}

六、图片组件Imgae

1.Image介绍

图片组件是显示图像的组件，Image 组件有很多构造函数，这里我们只给大家讲两个
Image.asset，        本地图片
Image.network        远程图片
Image  组件的常用属性:

2.Image加载网络图片

//加载网络图片
class HomeContents extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: Image.network(
          "https://img0.baidu.com/it/u=2878754786,2292453248&fm=26&fmt=auto&gp=0.jpg",
          alignment: Alignment.bottomCenter,
          //设置图片位置
          color: Colors.cyan,
          //设置图片显示属性
          colorBlendMode: BlendMode.color,
          fit: BoxFit.contain,
          //设置图片显示方式 cover拆解全屏
          repeat: ImageRepeat.repeat, //平铺
        ),
        width: 300,
        height: 300,
        decoration: BoxDecoration(
          color: Colors.yellow,
        ),
      ),
    );
  }
}

3.Image加载本地图片

/**
 * 加载本地图片
 * 1创建assets文件夹，并且在里面创建2.0x 3.0x 文件夹，分别放入对应同一张尺寸大小不一样的图片
 * 2在pubspec.yaml 文件assents下配置图片路径
 *    assets:
    - assets/images/
    - assets/2.0x/
    - assets/3.0x/

 */
class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: Image.asset(
          "assets/images/icon_5.webp",
          alignment: Alignment.bottomCenter, //设置图片位置
          //      color: Colors.cyan,         //设置图片显示属性
          colorBlendMode: BlendMode.color,
          fit: BoxFit.contain, //设置图片显示方式 cover拆解全屏
          repeat: ImageRepeat.repeat, //平铺
        ),
        width: 300,
        height: 300,
        decoration: BoxDecoration(
          color: Colors.yellow,
        ),
      ),
    );
  }
}

4.Image设置圆角图片-使用Container的特性 画圆实现

/**
 * 圆形图片--第一种方法 使用Container的特性 画圆实现
 */
class CircularImage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 300,
        width: 300,
        decoration: BoxDecoration(
            color: Colors.deepOrange,
            borderRadius: BorderRadius.circular(150),
            image: DecorationImage(
                image: NetworkImage(
                    "https://img0.baidu.com/it/u=1425165859,2689717355&fm=26&fmt=auto&gp=0.jpg"),
                fit: BoxFit.cover
            )
        ),
      ),
    );
  }
}

5.Image设置圆角图片-使用原生组件ClipOval实现

/**
 * 圆形图片--第二种方法 使用原生组件ClipOval实现，根据图片大小处理
 */
class CircularImages extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: ClipOval(
          child: Image.network(
            "https://img0.baidu.com/it/u=2878754786,2292453248&fm=26&fmt=auto&gp=0.jpg",
            width: 300,
            height: 300,
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }
}