flutter學(xué)習(xí)筆記（二）慕課技術(shù)胖老師聽課筆記

3-4ImageWidget圖片組件講解

import 'package:flutter/material.dart';

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

//Image.asset:加載資源圖片，會(huì)使打包時(shí)包體過大

//Image.network:網(wǎng)絡(luò)資源圖片，經(jīng)常換的或者動(dòng)態(tài)的圖片

//image.file：本地圖片，比如相機(jī)照像后的圖片預(yù)覽

//image.memory:加載到內(nèi)存中的圖片，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,

//? ? ? ? ? 圖片可能被裁切 充滿容器 保持原比例 工作中非常實(shí)用 fitWidth:橫向是充滿的縱向可能被裁切或拉伸 fitHeight? scaleDown:圖片大于容器

//? ? ? ? ? ? ? ? fit: BoxFit.cover,

//? ? ? ? ? ? ? 圖片混合模式美工會(huì)給

? ? ? ? ? ? //? ? ? ? ? ? ? color: Colors.amber,

//? ? ? ? ? ? ? colorBlendMode: BlendMode.colorBurn,

//? ? ? ? ? ? ? 圖片重復(fù) 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());

//定義一個(gè)widget

class MyApp extends StatelessWidget {

//? 重寫build方法

? @override

//? 上下文參數(shù)

? Widget build(BuildContext context) {

? ? return MaterialApp(

? ? ? title: 'TextWidget',

? ? ? home: Scaffold(

? ? ? ? ? appBar: AppBar(title: Text('TextWidget')),

? ? ? ? ? body: new ListView(

//? ? ? ? ? 返回的是一個(gè)數(shù)組

? ? ? ? ? ? children: <Widget>[

//? ? ? ? ? ? 列表瓦片

? ? ? ? ? ? ? new ListTile(

// 最主要的 flutter提供給我們的icon組件

? ? ? ? ? ? ? ? leading: new Icon(Icons.accessibility),

//? 圖標(biāo)加文字

? ? ? ? ? ? ? ? title: new Text(

? ? ? ? ? ? ? ? ? 'border_right',

? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ),

? ? ? ? ? ? ? new ListTile(

// 最主要的 flutter提供給我們的icon組件

? ? ? ? ? ? ? ? leading: new Icon(Icons.accessibility),

//? 圖標(biāo)加文字

? ? ? ? ? ? ? ? title: new Text(

? ? ? ? ? ? ? ? ? 'border_right',

? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ),

? ? ? ? ? ? ? new ListTile(

// 最主要的 flutter提供給我們的icon組件

? ? ? ? ? ? ? ? leading: new Icon(Icons.repeat),

//? 圖標(biāo)加文字

? ? ? ? ? ? ? ? title: new Text(

? ? ? ? ? ? ? ? ? 'border_right',

? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? ),

? ? ? ? ? ? ? new ListTile(

// 最主要的 flutter提供給我們的icon組件

? ? ? ? ? ? ? ? leading: new Icon(Icons.access_alarm),

//? 圖標(biāo)加文字

? ? ? ? ? ? ? ? title: new Text(

? ? ? ? ? ? ? ? ? 'border_right',

? ? ? ? ? ? ? ? ),

? ? ? ? ? ? ? )

? ? ? ? ? ? ],

? ? ? ? ? )),

? ? );

? }

}

2.圖片列表

import 'package:flutter/material.dart';

//void是沒有返回值的

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

//定義一個(gè)widget

class MyApp extends StatelessWidget {

//? 重寫build方法

? @override

//? 上下文參數(shù)

? Widget build(BuildContext context) {

? ? return MaterialApp(

? ? ? title: 'TextWidget',

? ? ? home: Scaffold(

? ? ? ? ? appBar: AppBar(title: Text('TextWidget')),

? ? ? ? ? body: new ListView(

//? ? ? ? ? 返回的是一個(gè)數(shù)組

? ? ? ? ? ? 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());

//定義一個(gè)widget

class MyApp extends StatelessWidget {

//? 重寫build方法

? @override

//? 上下文參數(shù)

? 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(

//? ? ? ? ? ? ? ? 橫向滾動(dòng)

? ? ? ? ? ? ? ? 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橫向列表優(yōu)化代碼

import 'package:flutter/material.dart';

//void是沒有返回值的

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

//定義一個(gè)widget

class MyApp extends StatelessWidget {

//? 重寫build方法

? @override

//? 上下文參數(shù)

? Widget build(BuildContext context) {

? ? return MaterialApp(

? ? ? title: 'TextWidget',

? ? ? home: Scaffold(

? ? ? ? ? appBar: AppBar(title: Text('TextWidget')),

? ? ? ? ? body: Center(

? ? ? ? ? ? child: Container(

? ? ? ? ? ? ? ? height: 200.0,

//? ? ? ? ? ? ? 調(diào)用mylist組件

? ? ? ? ? ? ? ? child: Mylist()),

? ? ? ? ? )),

? ? );

? }

}

//mylist組件分解出來

class Mylist extends StatelessWidget {

? @override

? Widget build(BuildContext context) {

? ? return ListView(

? ? ? //? ? ? ? ? ? ? ? 橫向滾動(dòng)

? ? ? 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動(dòng)態(tài)列表的使用

import 'package:flutter/material.dart';

//void是沒有返回值的 主方法調(diào)用MyApp 所以在此處傳遞數(shù)據(jù)

void main() => runApp(MyApp(

//? List()非固定長(zhǎng)度 List(3)長(zhǎng)度為3 List<String>()指定類型 [1,2,3]直接賦值 $i下標(biāo)

//generate生成器 有兩個(gè)參數(shù)1.是聲明長(zhǎng)度 （i）每一個(gè)循環(huán)的參數(shù) 單個(gè)循環(huán)的內(nèi)容

? ? items: new List<String>.generate(1000, (i) => 'item $i')));

//定義一個(gè)widget

class MyApp extends StatelessWidget {

? final List<String> items;

//? 構(gòu)造方法 默認(rèn)參數(shù)為key主鍵直接帶上 調(diào)用父類

? MyApp({Key key, @required this.items}) : super(key: key);

//? 重寫build方法

? @override

//? 上下文參數(shù)

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

? ? ? ? ? ? },

? ? ? ? ? )),

? ? );

? }

}

由于簡(jiǎn)書使用的少 格式過于簡(jiǎn)陋 歡迎訪問我本人的思否博客查看本文：https://segmentfault.com/a/1190000023069731

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容