【Flutter】----学习笔记1（1～5）
生活随笔
收集整理的這篇文章主要介紹了
【Flutter】----学习笔记1（1～5）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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
1.用的最多合集
fit: BoxFit.cover,//不拉伸 充滿戰哥屏幕 剪切 —不會變形【最多！！！】
alignment: Alignment.bottomCenter,//圖片位置
2.圓形圖片
頭像
3.本地圖片
的步驟：
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 網格組件
總結
以上是生活随笔為你收集整理的【Flutter】----学习笔记1（1～5）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： arcgis 属性表中起点终点创建线_一
- 下一篇： 计算机组成原理_选择