Flutter學習（二）

寫一個hello word

編輯lib下的main.dart文件

項目自動創建的main.dart內容如下

爲了方便學習，我們main.dart清空，分步驟來寫Hello world

導包 import ‘package:flutter/material.dart’;
谷歌提供的面向扁平化設計風格控件
入口函數

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

定義MyApp類,繼承與靜態組件（StatefullWudget 動態組件；StatelessWidget靜態組件）
重寫build方法，返回一個Widget組件，組件有很多屬性，title、theme、home等，我們需要牢記的是在flutter中一切皆組件

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      //Scaffold腳手架
      home: Scaffold(
        appBar: AppBar(
          title: Text("Hello World"),
        ),
        body: Center(
          child: Text("Hello World !!!"),
        ),
      ),
    );
  }
}

運行結果：

Flutter組件

還是要強調一下，Flutter一切皆組件

TextWidget文本組件

TextWiget常用屬性
TextAlign：文本對齊屬性
maxLines：文本顯示的最大行數
overflow：控制文本的溢出效果
Style屬性的用法，讓文本漂亮起來

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TextWidget',
      //Scaffold腳手架
      home: Scaffold(
        appBar: AppBar(
          title: Text("TextWidget"),
        ),
        body: Center(
          child: Text(
            "就是Android IOS winphone，網頁端四分天下的格局，每個公司需要維護四個團隊，這樣成本很高，所以就有了一個迫切的需求，能否開發一套在多個平臺上運行，這樣可以大大降低開發成本。",
            textAlign: TextAlign.left,
            maxLines: 5,
            overflow: TextOverflow.fade,
            style: TextStyle(
              fontSize: 25.0,
              color: Color.fromARGB(255, 255, 150, 150),
              decoration: TextDecoration.underline,
              decorationStyle: TextDecorationStyle.solid
            ),
          ),
        ),
      ),
    );
  }
}

運行效果：

但是爲毛第一行多了一條下劃線呢？
一頓調試之後發現有英文就會多出這條下劃線，沒有英文就正常，咋個麼回事？？？？

ContainerWidget容器組件講解
相當於div，放元素的一個容器或者說層

如何創建一個容器組件
Alignment屬性的使用（9種對齊方式）
設置寬高和顏色
Padding內邊距屬性的使用
EdgeInsets.all()統一設置
EdgeInsets.fromLTRB(value1,value2,value3,value4)分別設置
margin外邊距屬性的使用
decoration屬性製作彩色背景
設置容器的邊框
LinearGtadient設置背景顏色漸變
BoxDecoration Widget

class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
  return MaterialApp(
    title: 'TextWidget',
    //Scaffold腳手架
    home: Scaffold(
      appBar: AppBar(
        title: Text("TextWidget"),
      ),
      body: Center(
        child: Container(
          child: Text(
              "Hello World",
            style: TextStyle(
              fontSize: 40
            ),
          ),
          alignment: Alignment.topLeft,
          width: 500,
          height: 400,
          //color: Colors.blue,
          padding: const EdgeInsets.fromLTRB(10, 50, 0, 0),
          margin: const EdgeInsets.all(10),
          decoration: BoxDecoration(
            gradient: const LinearGradient(
                colors:[
                  Colors.blue,
                  Colors.amber,
                  Colors.amberAccent
                ]
            )
          ),
        )
      ),
    ),
  );
}
}

運行效果：

如果這樣寫：
就會報錯：
color和BoxDecoration使用衝突啦，不能同時用

ImageWidget圖片組件

Image Widget的幾種加入形式
image.asset:加載資源圖片，會使包體積過大
image.network:網絡資源圖片
image.file:本地圖片
image.memory：加載到內存中的圖片
Fit屬性，BoxFit的各種屬性自己試下就可以了
圖片的混合模式
Repeat屬性讓圖片重複效果

class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
  return MaterialApp(
    title: 'TextWidget',
    //Scaffold腳手架
    home: Scaffold(
      appBar: AppBar(
        title: Text("TextWidget"),
      ),
      body: Center(
        child:Container(
          child: Image.network(
            "https://imgsa.baidu.com/news/q%3D100/sign=f0bd6fbdadcc7cd9fc2d30d909012104/d058ccbf6c81800a45cafd5ebf3533fa828b47b6.jpg",
            //值越大圖片越小
            scale:4,
            fit: BoxFit.contain,
            //圖片的疊加模式
            color: Colors.amberAccent,
            colorBlendMode: BlendMode.colorBurn,
            //圖片填滿容器
            repeat: ImageRepeat.repeat,
          ),
          width: 200,
          height: 400,
          color: Colors.amberAccent,
        )
      ),
    ),
  );
}
}

運行效果：

ListViewWidget組件

Listview組件的語法
ListTile的使用

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TextWidget',
      //Scaffold腳手架
      home: Scaffold(
        appBar: AppBar(
          title: Text("TextWidget"),
        ),
        body: ListView(
          children: <Widget>[
            ListTile(
              leading: Icon(Icons.border_right),
              title: Text("border_right"),
            ),
            ListTile(
              leading: Icon(Icons.border_right),
              title: Text("border_right"),
            ),
            ListTile(
              leading: Icon(Icons.border_right),
              title: Text("border_right"),
            ),
            Image.network("https://imgsa.baidu.com/news/q%3D100/sign=f0bd6fbdadcc7cd9fc2d30d909012104/d058ccbf6c81800a45cafd5ebf3533fa828b47b6.jpg"),
            Image.network("https://imgsa.baidu.com/news/q%3D100/sign=f0bd6fbdadcc7cd9fc2d30d909012104/d058ccbf6c81800a45cafd5ebf3533fa828b47b6.jpg"),
            Image.network("https://imgsa.baidu.com/news/q%3D100/sign=f0bd6fbdadcc7cd9fc2d30d909012104/d058ccbf6c81800a45cafd5ebf3533fa828b47b6.jpg"),
            Image.network("https://imgsa.baidu.com/news/q%3D100/sign=f0bd6fbdadcc7cd9fc2d30d909012104/d058ccbf6c81800a45cafd5ebf3533fa828b47b6.jpg"),
            Image.network("https://imgsa.baidu.com/news/q%3D100/sign=f0bd6fbdadcc7cd9fc2d30d909012104/d058ccbf6c81800a45cafd5ebf3533fa828b47b6.jpg"),
          ],
        ),

      ),
    );
  }
}

運行效果：

橫向列表

製作橫向列表
scrollDirection屬性的講解
Axis.horizontal:橫向滾動或者叫水平方向滾動
Axis.vertical:縱向滾動或者叫垂直方向滾動

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TextWidget',
      //Scaffold腳手架
      home: Scaffold(
        appBar: AppBar(
          title: Text("TextWidget"),
        ),
        body: Center(
          child: Container(
            height: 200,
            child: ListView(
              scrollDirection: Axis.horizontal,
              children: <Widget>[
                Container(
                  width: 180,
                  color: Colors.amberAccent,
                ),
                Container(
                  width: 180,
                  color: Colors.blue,
                ),
                Container(
                  width: 180,
                  color: Colors.deepOrange,
                ),
                Container(
                  width: 180,
                  color: Colors.purple,
                ),
              ],
            ),
          ),
        )
      ),
    );
  }
}

運行效果：

代碼優化，自定義組件
以上ListView顯得嵌套很多，利用自定義組件優化如下

class MyApp extends StatelessWidget {
 // This widget is the root of your application.
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     title: 'TextWidget',
     //Scaffold腳手架
     home: Scaffold(
         appBar: AppBar(
           title: Text("TextWidget"),
         ),
         body: Center(
           child: Container(
             height: 200,
             child: MyListView(),
           ),
         )
     ),
   );
 }
}

class MyListView extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   // TODO: implement build
   return ListView(
     scrollDirection: Axis.horizontal,
     children: <Widget>[
       Container(
         width: 180,
         color: Colors.amberAccent,
       ),
       Container(
         width: 180,
         color: Colors.blue,
       ),
       Container(
         width: 180,
         color: Colors.deepOrange,
       ),
       Container(
         width: 180,
         color: Colors.purple,
       ),
       Container(
         width: 180,
         color: Colors.black,
       ),
     ],
   );
 }
}

動態列表的使用

Dart中List類型的使用
可以看成是數組，聲明List的4種方式
傳遞和接受參數，實現動態列表的基礎
動態列表製作

void main() =>
    runApp(MyApp(
        items: List<String>.generate(1000, (i) => "item $i")
    ));

class MyApp extends StatelessWidget {
  ///接收參數
  final List<String> items;
  ///構造方法
  MyApp({Key key, @required this.items}) :super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'ListWidget',
        //Scaffold腳手架
        home: Scaffold(
        appBar: AppBar(
        title: Text("ListWidget"),
    ),
    body: ListView.builder(
    itemCount: items.length,
    itemBuilder: (context, index) {
    return ListTile(title: Text("${items[index]}"));
    })
    ),
    );
    }
  }

運行效果：

GridView組件

GridView網格列表的使用
GridView Widget 屬性
padding：設置內邊距
crossAxisSpacing\ mainAxisSpacing：網格間的空隙

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "抽獎佈局",
      home: Scaffold(
          appBar: AppBar(
            title: Text("抽獎佈局"),
          ),
          body: GridView.count(
            padding: const EdgeInsets.all(10),
            //副軸（左右）
            crossAxisSpacing: 10,
            //主軸（上下）
            mainAxisSpacing: 10,
            crossAxisCount: 3,
            //寬高比
            childAspectRatio: 1,
            children: <Widget>[
              Image.network("https://pic1.iqiyipic.com/common/20190410/sevenDayPrize_03.png",scale:1,fit: BoxFit.cover,),
              Image.network("https://pic1.iqiyipic.com/common/20190410/sevenDayPrize_07.png",scale:1,fit: BoxFit.cover,),
              Image.network("https://pic1.iqiyipic.com/common/20190410/sevenDayPrize_05.png",scale:1,fit: BoxFit.cover,),
              Image.network("https://pic1.iqiyipic.com/common/20190410/sevenDayPrize_13.png",scale:1,fit: BoxFit.cover,),
              Image.network("https://pic0.iqiyipic.com/common/20190410/sevenDay-9.gif",scale:1,fit: BoxFit.cover,),
              Image.network("https://pic1.iqiyipic.com/common/20190410/sevenDayPrize_12.png",scale:1,fit: BoxFit.cover,),
              Image.network("https://pic1.iqiyipic.com/common/20190411/sevenDayPrize_18.png",scale:1,fit: BoxFit.cover,),
              Image.network("https://pic1.iqiyipic.com/common/20190410/sevenDayPrize_17.png",scale:1,fit: BoxFit.cover,),
              Image.network("https://pic1.iqiyipic.com/common/20190410/sevenDayPrize_16.png",scale:1,fit: BoxFit.cover,),

            ],
          )),
    );
  }
}

運行效果：

Flutter學習（二）

寫一個hello word

Flutter組件

PDManer [元數建模]-v4.9.0 發佈：一款簡單好用的數據庫建模平臺

使用neovim打造go ide(支持代碼跳轉, 代碼補全, 實時語法檢查)

cs01 CSS Syntax

挑戰程序設計競賽 2.3章習題 poj 3046 Ant Counting

[MASM拾遺]Offset僞指令

h30 HTML Layout Elements

瞭解顯卡

一款基於C#開發的通訊調試工具（支持Modbus RTU、MQTT調試）

Linux/Golang/glibC系統調用

cs04 CSS Measurement Units

編譯時動態生成代碼技術之Element詳解（二）

Flutter學習（三）

編譯時動態生成代碼技術之javapoet（四）

編譯時動態生成代碼技術之java註解（一）

編譯時動態生成代碼技術之註解處理器（三）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結