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组件

常用的 Git 指令

sm4加密工具类

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

Flutter學習（三）

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

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

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

Mac下配置sublime實現LaTeX

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

linux以太網驅動總結