01 container、Text組件

///01container、text組建import 'package:flutter/material.dart';void main() {runApp(MyApp()); }class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('title'),),body: homeCenter()));} }class homeCenter extends StatelessWidget {@overrideWidget build(BuildContext context) {return Center(child: Container(child: Text('如果你想用Flutter開發app的話，你首先必須得會Dart。此教程由IT營大地老師錄制，更新于2020年。 教程前14講是Dart基礎，第15講開始講的是Flutter。',textAlign: TextAlign.left,//align:對其 使其一致// overflow: TextOverflow.fade,maxLines: 6,textScaleFactor: 1, //字體放大2倍style: TextStyle(fontSize: 22.3, color: Colors.green, // color: Color.fromRGBO(122, 231, 133, 3.3),fontWeight: FontWeight.w800,//字體粗細fontStyle: FontStyle.italic,//字體傾斜decoration: TextDecoration.lineThrough,//裝飾文本 這個是穿過文字的一個線decorationColor: Colors.white,//穿過去的線的顏色decorationStyle: TextDecorationStyle.solid,//是實心的還是許仙letterSpacing: 2.3,//單個字的艱巨 字母與字母之間的距離----中文比較多wordSpacing: 1.1,//單詞與單詞之間的艱巨),),height: 300.0,width: 300.0,// 注意這里 BoxDecoration 里面的修飾的都會少i個BorderRadiusGeometry的Geometry//減去Geometry之后才可以.decoration: BoxDecoration(//box的裝飾color: Colors.yellow,border: Border.all(color: Colors.blue,width: 2.0,//線的粗細),borderRadius: BorderRadius.all(//設置邊框圓角Radius.circular(20)//這里直接是用Radius.circular(20) 不能直接寫數字),),// padding: EdgeInsets.all(20),//內艱巨padding: EdgeInsets.fromLTRB(10, 22, 31, 4),//坐上又下// transform: Matrix4.translationValues(100,20,0),//位移 這里是座椅100 下移20// transform: Matrix4.rotationZ(-0.2),//旋轉 // transform: Matrix4.diagonal3Values(2, 3, 4),//縮放alignment: Alignment.bottomCenter,),);} }

---

---

---

---

02 圖片組件image

image的小標簽

net的圖片

圓形圖片

本地圖片

1.用的最多合集

fit: BoxFit.cover,//不拉伸 充滿戰哥屏幕 剪切 —不會變形【最多！！！】
alignment: Alignment.bottomCenter,//圖片位置

2.圓形圖片

頭像

3.本地圖片

的步驟：

新建images文件夾 注意要有1x2x3x等等等等

在.yaml文件 里面配置

在main中調用

///02 imageimport 'package:flutter/material.dart'; import 'package:myapp01/main%20copy.dart';void main() {runApp(MyApp()); }class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('fluuuu'),),body: HomeContent(),),);} }//圓形圖片 clipOval【nice！！！ class HomeContent extends StatelessWidget {@overrideWidget build(BuildContext context) {return Center(child: Container(child: ClipOval(child: Image.network('http://shp.qpic.cn/ishow/2735042809/1588039188_84828260_15570_sProdImgNo_7.jpg/0',width: 100,height: 100,fit: BoxFit.cover,),),),);} }//實現圓形圖片 [傻方法] class HomeContent2 extends StatelessWidget {@overrideWidget build(BuildContext context) {return Center(child: Container(width: 300.0,height: 300.0,decoration: BoxDecoration(borderRadius: BorderRadius.circular(150),image: DecorationImage(image: NetworkImage("http://shp.qpic.cn/ishow/2735052109/1590023062_84828260_20731_sProdImgNo_2.jpg/0",),fit: BoxFit.cover),color: Colors.yellow,border: Border.all(color: Colors.blue, width: 2.0)),),);} }//圖片image class HomeContent1 extends StatelessWidget {@overrideWidget build(BuildContext context) {return Center(// child: Text('公孫離-祈雪靈祝'),child: Container(child: Image.network("http://shp.qpic.cn/ishow/2735020816/1612773126_84828260_2178_sProdImgNo_2.jpg/0",// alignment: Alignment.bottomCenter,//圖片位置// color: Colors.blue,// colorBlendMode: BlendMode.multiply,//給圖片加濾鏡// 接下來的是一個用的非常多的fit// fit: BoxFit.cover,//拉伸 充滿戰哥屏幕// fit: BoxFit.cover,//不拉伸 充滿戰哥屏幕 剪切 ---不會變形【最多！！！】// fit: BoxFit.fill,//拉伸 充滿戰哥屏幕 剪切 ----會變形// fill 和 cover 用的最多repeat: ImageRepeat.repeat, //平鋪),width: 300.0,height: 300.0,decoration: BoxDecoration(color: Colors.yellow,border: Border.all(color: Colors.blue, width: 2.0)),),);} }

---

---

---

---

03 表單ListView（1）ListTile + image + Axis.horizontal

HomeContainer1----ListTile 垂直列表

HomeContainer2-----image 垂直圖文列表

HomeContainer3------scrollDirection: Axis.horizontal 水平列表

///03 表單 ListView （1） -【ListTile + image + Axis.horizontal】垂直列表、垂直圖文列表、水平列表 /// 1. ListView -ListTile 垂直列表 /// 2. ListView -image 垂直圖文列表 /// 3. ListView - scrollDirection: Axis.horizontal 水平列表import 'package:flutter/material.dart';void main() {runApp(MyApp()); }class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('表單ListTile'),),body: HomeContainer3()));} }/// 3. ListView - scrollDirection: Axis.horizontal 水平列表 class HomeContainer3 extends StatelessWidget {@overrideWidget build(BuildContext context) {return Container(height: 180.0,child: ListView(scrollDirection: Axis.horizontal, // 水平// scrollDirection: Axis.vertical, // 垂直children: <Widget>[Container(width: 180.0,color: Colors.yellow[200],child: ListView(children: [Padding(padding: EdgeInsets.all(10)),Image.network("http://shp.qpic.cn/ishow/2735030216/1614674580_84828260_31404_sProdImgNo_2.jpg/0",),Text('露娜-瓷語鑒心',textAlign: TextAlign.center,)],),),Container(width: 180.0,color: Colors.red[100],),Container(width: 180.0,color: Colors.blue[200],),Container(width: 180.0,color: Colors.green[100],),],),);} }// ListView -image垂直圖文列表 class HomeContainer2 extends StatelessWidget {@overrideWidget build(BuildContext context) {return ListView(padding: EdgeInsets.all(10), children: <Widget>[Image.network("http://shp.qpic.cn/ishow/2735030216/1614674580_84828260_31404_sProdImgNo_2.jpg/0"),Container(child: Text('露娜-瓷語鑒心',textAlign: TextAlign.center,style: TextStyle(fontSize: 18.0,),),height: 60,padding: EdgeInsets.fromLTRB(0, 5, 0, 15),),Image.network("http://shp.qpic.cn/ishow/2735022210/1613959427_84828260_6733_sProdImgNo_2.jpg/0"),Image.network("http://shp.qpic.cn/ishow/2735022210/1613959513_84828260_31791_sProdImgNo_2.jpg/0"),]);} }// ListView -ListTile 垂直列表 class HomeContainer1 extends StatelessWidget {@overrideWidget build(BuildContext context) {return ListView(padding: EdgeInsets.all(10),children: <Widget>[ListTile(leading: Icon(Icons.sports_football,color: Colors.red,), // 在列表前面加圖標 ，可以變換顏色title: Text('軟件工程（國家級“本科教學工程”綜合改革試點專業、廣東省首批示范性軟件學院）',style: TextStyle(color: Colors.orange, fontSize: 20.0),),),ListTile(leading: Icon(Icons.settings), // 在列表前面加圖標 ，可以變換顏色title: Text('專業前景',style: TextStyle(color: Colors.orange),),subtitle: Text('軟件工程專業培養的軟件開發相居IT行業前列。',style: TextStyle(color: Colors.blue, fontSize: 10.0),),),ListTile(trailing: Icon(Icons.home), //在表單末尾加上圖標title: Text('培養目標',style: TextStyle(color: Colors.orange),),subtitle: Text('本專業培養德、智、體、美全面發展，掌握數學與自然科學基礎知識，系統掌握計算機科學基礎理論、計算機軟/硬件系統及軟件工程專業知識，具',style: TextStyle(color: Colors.blue, fontSize: 10.0),),),ListTile(//leading:可以識別圖標也可以識別圖片leading: Image.network("http://shp.qpic.cn/ishow/2735020816/1612773126_84828260_2178_sProdImgNo_2.jpg/0"),title: Text('專業方向',style: TextStyle(color: Colors.orange),),subtitle: Text('軟件開發、軟件分析、嵌入式軟件。',style: TextStyle(color: Colors.blue, fontSize: 10.0),),),ListTile(//也可以實現兩個圖片 前后一起放leading: Image.network("http://shp.qpic.cn/ishow/2735011313/1610516936_84828260_3358_sProdImgNo_2.jpg/0"),trailing: Image.network("http://shp.qpic.cn/ishow/2735030216/1614674580_84828260_31404_sProdImgNo_2.jpg/0"),title: Text('主要課程：',style: TextStyle(color: Colors.orange),),subtitle: Text('計算機導論、程序設計基礎、面向對象程序設計、計算機系統(1)、計算機系統(2)、數據結構與算法、離散數學、算法設計與分析、數據庫系統、',style: TextStyle(color: Colors.blue, fontSize: 10.0),),),],);} }

04 表單ListView （2）動態列表、動態獲取循環列表

動態列表

///04 表單ListView（2）動態列表 與循環獲取動態列表import 'package:flutter/material.dart';import 'package:myapp01/res/listData.dart';void main() {runApp(MyApp()); }class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('表單ListTile'),),body: HomeContainer3()));} }// 3.使用itembuilder 來返回對應list class HomeContainer3 extends StatelessWidget {Widget _getListData(context, index) {return ListTile(// 注意這里的格式 listData[index]得到當前index的數據// 在home1的類里面的get3方法中是value["imageUrl"] ----他是通過調用map來得到key和value// 這里則是通過index的方式 // map得到的是string item得到的是int數字title: Text(listData[index]["title"]),leading: Image.network(listData[index]["imageUrl"]),subtitle: Text(listData[index]["author"]),);}@overrideWidget build(BuildContext context) {return ListView.builder(// item相當于迭代器itemCount: listData.length, //返回一個list的長度itemBuilder: this._getListData);} }// 2.使用itembuilder 來返回對應list class HomeContainer2 extends StatelessWidget {List list = new List();// 構造函數HomeContainer2() {for (var i = 0; i < 20; i++) {this.list.add('it is $i');//這里是讓list數組增加一些 string的數據}}@overrideWidget build(BuildContext context) {return ListView.builder(// item相當于迭代器itemCount: this.list.length, //返回一個list的長度itemBuilder: (context, index) {//itemBuilder是一個方法 傳入兩個參數 一個內容 一個索引值// return this.list[index]; // 這樣返回比較奇怪return ListTile(title: Text(this.list[index]), //這里get到list的下表對應的內容//循環遍歷 text里面就會得到string的內容 相當與在這里構造了一個新的ListTile // 省略了for來構建ListTile 采用了迭代的方式);},);} }// 1.獲取動態列表 class HomeContainer1 extends StatelessWidget { // 1.死方法 c+v //自定義方法 _getData 加上_后表示私有方法// ignore: unused_elementList<Widget> _getData01() {return [ListTile(title: Text("list"),),ListTile(title: Text("list"),),ListTile(title: Text("list"),),];}// 2.使用for循環生成 listList<Widget> _getData02() {List<Widget> list = new List();for (int i = 0; i < 20; i++) {list.add(ListTile(title: Text("it is $i list"),));}return list;}// 3.import res中的list.dart文件中的數據List<Widget> _getData03() {// List<Widget> tempList = listData.map((value) { // 這樣寫 會報錯 因為map返回的是('123','3232'), 不會返回一個list《widget》// 用var的話會返回一個string（？）的類型 反正不是list 所以在return的時候要.tolist一下var tempList = listData.map((value) {return ListTile(leading: Image.network(value["imageUrl"]),title: Text(value["title"]),subtitle: Text(value["author"]),);});return tempList.toList();}@overrideWidget build(BuildContext context) {return ListView(children: this._getData03(),);} }

05 GridView 網格組件

///05 GridView 網格import 'package:flutter/material.dart';import 'package:myapp01/res/listData.dart';void main() {runApp(MyApp()); }class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('表單ListTile'),),body: HomeContainer4()));} }// 4 這里使用 GridView.builder // gridDelegate: SliverGridDelegateWithFixedCrossAxisCount【常用！！！！！ class HomeContainer4 extends StatelessWidget {Widget _getData(context, index) {return Container(child: Column(children: <Widget>[Image.network(listData[index]['imageUrl']),SizedBox(height: 10,),Text(listData[index]['title'],textAlign: TextAlign.center,style: TextStyle(fontSize: 15),),],),decoration:BoxDecoration(border: Border.all(color: Colors.grey, width: 1)),);}@overrideWidget build(BuildContext context) {return GridView.builder(gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2,mainAxisSpacing: 10,crossAxisSpacing: 10// 這里沒有padding),itemCount: listData.length,itemBuilder: this._getData,);} }// 3 映入res的LidtData class HomeContainer3 extends StatelessWidget {List<Widget> _getData() {var temp = listData.map((value) {return Container(child: Column(children: <Widget>[Image.network(value['imageUrl']),SizedBox(height: 10,),Text(value['title'],textAlign: TextAlign.center,style: TextStyle(fontSize: 15),),],),decoration:BoxDecoration(border: Border.all(color: Colors.grey, width: 1)),);});//注意map 要tolistreturn temp.toList();}@overrideWidget build(BuildContext context) {return GridView.count(crossAxisSpacing: 10.0, //左右艱巨mainAxisSpacing: 10.0, //上下艱巨padding: EdgeInsets.all(20),// childAspectRatio: 0.7, //寬度與高度的比例 在crossAxisCount: 2, // :多少列children: this._getData());// mainAxisSpacing ： 主軸艱巨// crossAxisSpacing ： 很軸艱巨} }// 2 調用方法 實現網格列表 【正式網格 class HomeContainer2 extends StatelessWidget {List<Widget> _getData() {List<Widget> list = new List();for (int i = 0; i < 20; i++) {list.add(Container(alignment: Alignment.center,child: Text('it is $i list',style: TextStyle(color: Colors.white, fontSize: 20),),color: Colors.blue,));}return list;}@overrideWidget build(BuildContext context) {return GridView.count(crossAxisSpacing: 20.0, //左右艱巨mainAxisSpacing: 20.0, //上下艱巨padding: EdgeInsets.all(20),childAspectRatio: 0.7, //寬度與高度的比例 在crossAxisCount: 2, // :多少列children: this._getData());// mainAxisSpacing ： 主軸艱巨// crossAxisSpacing ： 很軸艱巨} }// 1 死方法 class HomeContainer1 extends StatelessWidget {@overrideWidget build(BuildContext context) {return GridView.count(crossAxisSpacing: 20.0, //左右艱巨mainAxisSpacing: 20.0, //上下艱巨padding: EdgeInsets.all(20),childAspectRatio: 0.7, //寬度與高度的比例 在crossAxisCount: 2, // :多少列children: <Widget>[Text('DDDDDDD'),Text('DDDDDDD'),Text('DDDDDDD'),Text('DDDDDDD'),Text('DDDDDDD'),Text('DDDDDDD'),Text('DDDDDDD'),Text('DDDDDDD'),Text('DDDDDDD'),Text('DDDDDDD'),]);// mainAxisSpacing ： 主軸艱巨// crossAxisSpacing ： 很軸艱巨} }

總結

以上是生活随笔為你收集整理的【Flutter】----学习笔记1（1～5）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。