记录Flutter组件

Flutter组件

在Flutter中，万物皆组件，以下是组件使用的例子，记录常用的组件和常用的一些属性使用，如有错误请纠正，勿喷，谢谢

Container组件的例子代码片段

//pi 需要的包
import 'dart:math';

import 'package:flutter/material.dart';

void main() => runApp(ContainerMy());

class ContainerMy extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
  //代表使用纸墨设计(Material Design)风格的应用。里面包含了纸墨设计风格应用所需要的基本控件。
    return MaterialApp(
     debugShowCheckedModeBanner: false,  // 去掉左上角的DEBUG  设置这一属性即可
    //脚手架
      home: Scaffold(
      //标题栏
        appBar: AppBar(
          title: Text("Container示例Demo"), //设置标题
        ),
        //body内容区  使用居中布局
        body: Center(
          //子视图  使用Container组件
          child: Container(
            //宽
            width: 200.0,
              //高
            height: 200.0,
          	//padding  这里只设置了上内边距10.0
            padding: EdgeInsets.only(top: 10.0),
			//设置装饰
            decoration: BoxDecoration(
                //Border.all四周边框
                border: Border.all(
                  color: Color(0xff00ff00), //边框色
                  width: 10.0, //边框宽度
                ),
                //边框圆角
                borderRadius:
                    const BorderRadius.all(const Radius.circular(30.0)) 
                ),
//              color: Color(0xffff0000),//背景色
			//Container  组件自定义的子视图 设置了一个Text布局，设置里面的文字大小50.0,文字颜色为黑色
            child: Text(
              "Container",	//文本内容
              style: TextStyle(fontSize: 50.0, color: Colors.black),
            ), 
            transform: Matrix4.rotationZ(pi/9), //Z轴旋转  旋转角度是  π/9    正数是顺时针，负数是逆时针旋转，pi需要导包
          ),
        ),
      ),
    );
  }
}

运行效果：

Image组件的例子代码片段

import 'dart:io';
//下面使用Uint8的格式时需要的包
import 'dart:typed_data';

import 'package:flutter/material.dart';
//调用debugPaintSizeEnabled   时需要的包
import 'package:flutter/rendering.dart';
import 'package:flutter/services.dart';
//访问系统相册 图片选择
import 'package:image_picker/image_picker.dart';

void main() => runApp(MyApp());

//assets/images/tzd.jpg
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    debugPaintSizeEnabled = false; //可以看到可视布局
    return MaterialApp(
      //脚手架
      home: Scaffold(
        //标题栏
        appBar: AppBar(
          title: Text("Image示例Demo"),
        ),
        //列布局：里面的内容一列排列下去
        body: Column(
          //子视图数组
          children: <Widget>[
            //加载资源图片
            Image.asset(
              'assets/images/tzd.jpg', //资源图片的地址，需要先在yaml文件中配置
              width: 100.0,	//宽
              height: 100.0,	//高
            ),
            //加载网络图片
            Image.network(
              //网络图片的地址
              "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1554561603&di=ea023061145500e2515acd547ca55594&src=http://www.woaihuahua.com/uploads/allimg/150213/12-150213122345932.jpg",
              width: 100.0,
              height: 100.0,
            ),
            //Memory  自定义从内存中读取
            MemoryImageWidget(),
            //自定义从文件加载图片
            FileImageWidget(),
          ],
        ),
      ),
    );
  }
}
//自定义加载内存中的图片
//快捷键 stf 出现StatefulWidget    stl 出现StatelessWidget
class MemoryImageWidget extends StatefulWidget {
  @override
  _MemoryImageWidgetState createState() => _MemoryImageWidgetState();
}

//Memory  自定义从内存中读取的组件
class _MemoryImageWidgetState extends State<MemoryImageWidget> {
  //Uint8的格式
  Uint8List bytes;

  //生命周期  初始化的时候
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    //访问主资源包
    rootBundle.load("assets/images/tzd.jpg").then((data){
      if(mounted){  //此状态对象当前是在树中
        setState(() {
          //从缓存区里面讲内容取出来，转换成Uint8List的类型
          bytes = data.buffer.asUint8List();
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    //自定义装饰
    final decoration = BoxDecoration(
      //看看缓存里面的这个图片是否存在，如果不存在就返回null，如果存在就显示
      image: bytes ==null? null:DecorationImage(image: MemoryImage(bytes)),
    );
    return Container(
      width: 100.0,
      height: 100.0,
      //将自定义的装饰放进来
      decoration: decoration,
    );
  }
}

//读取SD卡中的图片，取到文件
class FileImageWidget extends StatefulWidget {
  @override
  _FileImageWidgetState createState() => _FileImageWidgetState();
}

class _FileImageWidgetState extends State<FileImageWidget> {

  File _image;

  //异步  进入系统的选择图片
  Future getImge() async{
  //获取用户选择的image图片文件
    var image =  await ImagePicker.pickImage(source: ImageSource.gallery);
    setState(() {
      //将选择的图片存好
      _image = image;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Center(
          //如果File为空的话  就显示一段文字‘未选择图片’，相反就显示flie图片
          child: _image==null?Text("未选择图片"):Image.file(_image,width: 200.0,height: 200.0,),
        ),
        FlatButton( //扁平化的按钮
          onPressed: getImge, //按钮的点击事件
          //按钮显示的内容
          child: Text("选择图片",style: TextStyle(color: Color(0xffff0000)),),
        )
      ],
    );
  }
}

需要在yaml文件中配置
加载对应的包


运行效果

选择系统相册照片前

选择系统相册照片后

Text组件的例子代码片段

//手势的包
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
//url加载的包
import 'package:url_launcher/url_launcher.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
    //脚手架
      home: Scaffold(
      //标题栏
        appBar: AppBar(
          title: Text("Text示例Demo"),
        ),
        //内容区
        body: Center(
        //列布局
          child: Column(
            //主轴居中  因为是列布局，所以是垂直居中
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text("第一个Text示例demo，这是一个显示文本的组件Text，非常常用的一个组件",
                //最大的行数
                maxLines: 1,
                //超出部分的显示样式    TextOverflow.clip阶段   TextOverflow.ellipsis文字溢出的部分出现省略号
                overflow: TextOverflow.ellipsis,
                //自动换行，默认为true
                softWrap: false,
                //文字的样式
                style: TextStyle(
                  //文字的大小
                    fontSize: 30.0,
                    //TextDecoration.lineThrough文字上面出现删除线
                    decoration: TextDecoration.lineThrough,
                    //TextDecorationStyle.wavy   设置decoration里面线的样式
                    decorationStyle: TextDecorationStyle.wavy
                ),
              ),
              //通常用来占位
              SizedBox(
                height: 10.0,
              ),
              //富文本
              RichText(
                text: TextSpan(
                    text: "第一个Text示例demo，",
                    //文字的颜色 文字大小
                    style: TextStyle(color: Color(0xffff0000), fontSize: 20.0),
                    children: <TextSpan>[
                      TextSpan(
                        text: "这是一个显示文本的组件Text，非常常用的一个组件",
                      ),
                      TextSpan(
                          style: TextStyle(
                            //文字的大小
                              fontSize: 30.0,
                              //TextDecoration.underline  下划线
                              decoration: TextDecoration.underline,
                              //TextDecorationStyle.wavy   设置decoration里面线的样式
                              decorationStyle: TextDecorationStyle.wavy
                          ),
                          text: "点我跳转",
                          //TextSpan 的手势点击事件
                          recognizer: TapGestureRecognizer()
                            ..onTap = () async{	//..onTap 点点表示链式调用
                            //注意  请求网路  都需要用到异步   async   await
                              String url = "http://www.baidu.com/";
                              //如果能够加载网站
                              if(await canLaunch(url)) {
                                //加载，通过浏览器打开的
                                await launch(url);
                              } else {  //不能加载  我们就抛异常
                                throw 'Could not launch $url';
                              }
                            }
                      ),
                    ]
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

运行效果
点击‘点我跳转’，可打开浏览器进行跳转