乐趣区

flutter学习笔记二慕课技术胖老师听课笔记

jiezi

3-4ImageWidget 图片组件讲解 

import 'package:flutter/material.dart';

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

//Image.asset: 加载资源图片，会使打包时包体过大
//Image.network: 网络资源图片，经常换的或者动态的图片
//image.file：本地图片，比如相机照像后的图片预览
//image.memory: 加载到内存中的图片，Uint8List
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TextWidget',
      home: Scaffold(appBar: AppBar(title: Text('TextWidget')),
        body: Center(
            child: Container(
          child: new Image.network(
            'https://img1.mukewang.com/szimg/5ef018f808c6394c06000338-360-202.jpg',
//                缩放 值越大图片越小
            scale: 1.5,
//                图片充满容器 有可能被拉伸
//                fit: BoxFit.fill,
//              图片保持原比例 宽或高最大
//                fit: BoxFit.contain,
//           图片可能被裁切 充满容器 保持原比例 工作中非常实用 fitWidth: 横向是充满的纵向可能被裁切或拉伸 fitHeight  scaleDown: 图片大于容器
//                fit: BoxFit.cover,

//               图片混合模式美工会给
            //              color: Colors.amber,
//               colorBlendMode: BlendMode.colorBurn,
//              图片重复 repeatX 横向 Y 纵向
            repeat: ImageRepeat.repeat,
          ),
          width: 300.0,
          height: 200.0,
          color: Colors.amber,
        )),
      ),
    );
  }
}

3-5ListViewWidget 列表组件讲解

1. 列表瓦片 

import 'package:flutter/material.dart';

//void 是没有返回值的
void main() => runApp(MyApp());

// 定义一个 widget
class MyApp extends StatelessWidget {
//  重写 build 方法
  @override
//  上下文参数
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TextWidget',
      home: Scaffold(appBar: AppBar(title: Text('TextWidget')),
          body: new ListView(
//          返回的是一个数组
            children: <Widget>[
//            列表瓦片
              new ListTile(
// 最主要的 flutter 提供给我们的 icon 组件
                leading: new Icon(Icons.accessibility),
//  图标加文字
                title: new Text('border_right',),
              ),
              new ListTile(
// 最主要的 flutter 提供给我们的 icon 组件
                leading: new Icon(Icons.accessibility),
//  图标加文字
                title: new Text('border_right',),
              ),
              new ListTile(
// 最主要的 flutter 提供给我们的 icon 组件
                leading: new Icon(Icons.repeat),
//  图标加文字
                title: new Text('border_right',),
              ),
              new ListTile(
// 最主要的 flutter 提供给我们的 icon 组件
                leading: new Icon(Icons.access_alarm),
//  图标加文字
                title: new Text('border_right',),
              )
            ],
          )),
    );
  }
}

2. 图片列表 

import 'package:flutter/material.dart';
//void 是没有返回值的
void main() => runApp(MyApp());
// 定义一个 widget
class MyApp extends StatelessWidget {
//  重写 build 方法
  @override
//  上下文参数
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TextWidget',
      home: Scaffold(appBar: AppBar(title: Text('TextWidget')),
          body: new ListView(
//          返回的是一个数组
            children: <Widget>[
              new Image.network('https://img1.mukewang.com/szimg/5ee0782708609a8506000338-360-202.jpg'),
              new Image.network('https://img1.mukewang.com/szimg/5ed0dcff0984b5c812000676-360-202.png'),
              new Image.network('https://img1.mukewang.com/szimg/5ee0782708609a8506000338-360-202.jpg'),
            ],
          )),
    );
  }
}

3- 6 横向列表的使用

1. 横向列表原始代码 

import 'package:flutter/material.dart';

//void 是没有返回值的
void main() => runApp(MyApp());

// 定义一个 widget
class MyApp extends StatelessWidget {
//  重写 build 方法
  @override
//  上下文参数
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TextWidget',
      home: Scaffold(appBar: AppBar(title: Text('TextWidget')),
          body: Center(
            child: Container(
              height: 200.0,
              child: new ListView(
//                横向滚动
                scrollDirection: Axis.horizontal,
                children: <Widget>[
                  new Container(
                    width: 180.0,
                    color: Colors.amber,
                  ),
                  new Container(
                    width: 180.0,
                    color: Colors.purple,
                  ),
                  new Container(
                    width: 180.0,
                    color: Colors.lightGreen,
                  ),
                  new Container(
                    width: 180.0,
                    color: Colors.black12,
                  ),
                ],
              ),
            ),
          )),
    );
  }
}

2 横向列表优化代码 

import 'package:flutter/material.dart';

//void 是没有返回值的
void main() => runApp(MyApp());

// 定义一个 widget
class MyApp extends StatelessWidget {
//  重写 build 方法
  @override
//  上下文参数
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TextWidget',
      home: Scaffold(appBar: AppBar(title: Text('TextWidget')),
          body: Center(
            child: Container(
                height: 200.0,
//              调用 mylist 组件
                child: Mylist()),
          )),
    );
  }
}

//mylist 组件分解出来
class Mylist extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      //                横向滚动
      scrollDirection: Axis.horizontal,
      children: <Widget>[
        new Container(
          width: 180.0,
          color: Colors.amber,
        ),
        new Container(
          width: 180.0,
          color: Colors.purple,
        ),
        new Container(
          width: 180.0,
          color: Colors.lightGreen,
        ),
        new Container(
          width: 180.0,
          color: Colors.black12,
        ),
      ],
    );
  }
}

3- 7 动态列表的使用 

import 'package:flutter/material.dart';

//void 是没有返回值的 主方法调用 MyApp 所以在此处传递数据
void main() => runApp(MyApp(//  List() 非固定长度 List(3) 长度为 3 List<String>() 指定类型 [1,2,3] 直接赋值 $i 下标
//generate 生成器 有两个参数 1. 是声明长度（i）每一个循环的参数 单个循环的内容
    items: new List<String>.generate(1000, (i) => 'item $i')));

// 定义一个 widget
class MyApp extends StatelessWidget {
  final List<String> items;
//  构造方法 默认参数为 key 主键直接带上 调用父类
  MyApp({Key key, @required this.items}) : super(key: key);
//  重写 build 方法
  @override
//  上下文参数
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TextWidget',
      home: Scaffold(appBar: AppBar(title: Text('TextWidget')),
          body: new ListView.builder(
            itemCount: items.length,
//            上下文和索引
            itemBuilder: (context, index) {return new ListTile(title: new Text('${items[index]}'));
            },
          )),
    );
  }
}
退出移动版