flutter學習筆記（二）慕課技術胖老師聽課筆記

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]}'));
            },
          )),
    );
  }
}