Flutter 学习笔记（二）----基本组件

吐槽

上一周都在看flutter的基本组件，主要是看技术胖的b站视频和官方的文档，看完才觉得还是先学下dart语法再学效果会好一点。明天要考试了很难受啊，自己还得晚上复习复习考试内容。
//主要是记载下自己看视频学习的代码，组件的用法一看就知道了

Text widget

最常用的组件，主要是看下省略点什么的怎么处理的

import 'package:flutter/material.dart';

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

class Myapp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        body: Center(
          child: Text(
            '啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦零零零零',
           // textAlign:TextAlign.center ,//居中对齐
            textAlign: TextAlign.right, //右对齐
            maxLines: 1, //最大显示函数
           // overflow:TextOverflow.clip,//省略文字
            //overflow: TextOverflow.ellipsis,//省略文字三个省略点
            overflow: TextOverflow.fade, //渐变
            //字体属性
            style: TextStyle(
              fontSize: 25.0,//字体大小
              color: Color.fromARGB(255, 255, 125, 125),
              decoration: TextDecoration.underline, //下划线
              decorationStyle: TextDecorationStyle.solid,
            ),
          ),
        ),
      ),
    );
  }


}

Container widget 盒子布局

这个写前端的应该很清楚，但是对我们客户端来说我觉得这个就是一个跟布局，或者一个根View块这样的

child: Container(//创建盒子布局
          child: new Text('啦零零零零',style: TextStyle(fontSize: 40.0),),
          //alignment: Alignment.center,  //居中对齐
          alignment: Alignment.bottomRight, //下布局的位置左对齐
          width: 500.0,
          height: 400.0, //设置布局的宽高
          //color: Colors.lightBlue, //布局的颜色

         // padding: const EdgeInsets.all(10.0), //上下左右的边距
          padding: const EdgeInsets.fromLTRB(10.0, 100.0, 0.0, 0.0), //内边距
          margin: const EdgeInsets.all(10.0) //外边距

          // ignore: expected_token
          decoration: new BoxDecoration(
            gradient: const LinearGradient(
            colors: [Colors.lightBlue,Colors.greenAccent,Colors.purple]  //背景颜色
        )
            // ignore: expected_token
            border: Border.all(width: 2.0,color: Colors.red),  //外边框距离 颜色
        ),
        ),

imageview

• 资源目录
• asset本地路径
• file内存图片
• memorynetWork 网络图片

 child: Container(
          child: new Image.network('',
         // fit: BoxFit.contain,//尽量充满容器
          //  fit: BoxFit.fill, //充满容器
            //fit: BoxFit.fitWidth,//横向充满
           // fit: BoxFit.fitHeight, //纵向充满
           // fit: BoxFit.cover, //图片不变形 但是被裁切
            fit: BoxFit.scaleDown, //没有变化


            color: Colors.greenAccent, //图片颜色
            colorBlendMode:BlendMode.darken , //混合模式

            //repeat: ImageRepeat.noRepeat, //不重复
           // repeat: ImageRepeat.repeat //重复填充满
            repeat: ImageRepeat.repeatX, //x轴填充满



          ),
          width: 300.0,
          height: 200.0,
          color:Colors.amberAccent

        ),

ListView

普通使用

里面有个widget数组，处理起来还是很方便的

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: new AppBar(title: new Text("ListView Widget"),),
        body: new ListView(
          children: <Widget>[ //一个数组
            new ListTile( //第一行信息
              leading: new Icon(Icons.perm_camera_mic), //图片信息
              title: new Text('第一个'),                 //文字
            ),
            n