[移动开发]Flutter

第四节: Dart 中常用集合 List/Map - 简书 (jianshu.com)

调用抽象类中的方法（抽象方法和非抽象方法），如果方法是static的，直接 抽象类。方法 就可以了；如果是非static的则必须需要一个继承的非抽象类，然后用这个非抽象类的实例来调用方法。

1.课程大纲

?(14条消息) flutter- 空安全: Try adding either an explicit non-‘null‘ default value or the ‘required‘ modifier._ifredom-CSDN博客

=====================================================

前言：

快捷键的使用：

1、alt+ctrl+b:查找所有的实现类

2，alt+enter :生成container

3.ctrl+o：生成抽象方法

4.alt+enter：将statelessWidget转化为StatefulWidget

1.widget的生命周期

? ? ? ??

?2.基础的widget

? 2.1：普通文本Text

? ? ? 普通文本的展示:

? ? ?控制文本布局的参数：textAlign,排版方向等
? ? ?控制文本样式的参数：color，字体大小等

? ?

import 'package:flutter/material.dart';
// alt+enter :生成container
// ctrl +alt + b：查看所有的实现类
// 将statelessWidget转化为StatefulWidget：alt+enter
main() {
  runApp(MyAPP());
}
class MyAPP extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
   return MaterialApp(
     debugShowCheckedModeBanner: false,
     home:HYHomepage()
     
   );
  }
}

class HYHomepage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("基础的widget"),
      ),
      body: HYHomeContent(),
    );
  }
}
// 普通文本的展示
// 控制文本布局的参数：textAlign,排版方向等
// 控制文本样式的参数：color，字体大小等
class HYHomeContent extends StatefulWidget {
  @override
  State<HYHomeContent> createState() => _HYHomeContentState();
}

class _HYHomeContentState extends State<HYHomeContent> {
  @override
  Widget build(BuildContext context) {
    return const Text("莫听穿林打叶声，何妨吟啸且徐行。\n竹杖芒鞋轻胜马。谁怕！　一蓑烟雨任平生。归去，也无风雨也无晴。",
        textAlign: TextAlign.center,
//        显示最大行数
        maxLines: 3,
//        超过3行的字体....
        overflow: TextOverflow.ellipsis,
        style:TextStyle(
          fontSize: 20,
          color: Colors.red,
          fontWeight: FontWeight.bold
        ),
    );
  }
}

超级文本：（Text.rich）主要做图文混排

import 'package:flutter/material.dart';
// alt+enter :生成container
// ctrl +alt + b：查看所有的实现类
// 将statelessWidget转化为StatefulWidget：alt+enter
main() {
  runApp(MyAPP());
}
class MyAPP extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
   return MaterialApp(
     debugShowCheckedModeBanner: false,
     home:HYHomepage()
     
   );
  }
}

class HYHomepage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("基础的widget"),
      ),
      body: HYHomeContent(),
    );
  }
}
// 普通文本的展示
// 控制文本布局的参数：textAlign,排版方向等
// 控制文本样式的参数：color，字体大小等
class HYHomeContent extends StatefulWidget {
  @override
  State<HYHomeContent> createState() => _HYHomeContentState();
}

class _HYHomeContentState extends State<HYHomeContent> {
  @override
  Widget build(BuildContext context) {
    return  Text.rich(
        TextSpan(
//          text: "hello World1123",
//          style:TextStyle(fontSize: 20,color: Colors.red),
        children: [
          TextSpan(text:"kello world",style: TextStyle(color: Colors.red)),
          TextSpan(text:"kello flutter",style: TextStyle(color: Colors.orange)),
          WidgetSpan(child: Icon(Icons.favorite,color: Colors.redAccent,)),
        ]
    ));
  }
}

2.2按钮：

2.2.1:RaiseButton（凸起按钮）

import 'package:flutter/material.dart';
// alt+enter :生成container
// ctrl +alt + b：查看所有的实现类
// 将statelessWidget转化为StatefulWidget：alt+enter
main() {
  runApp(MyAPP());
}
class MyAPP extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
   return MaterialApp(
     debugShowCheckedModeBanner: false,
     home:HYHomepage()
     
   );
  }
}
// 按钮
class HYHomepage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("基础的widget"),
      ),
      body: HYHomeContent(),
    );
  }
}
class HYHomeContent extends StatefulWidget {
  @override
  State<HYHomeContent> createState() => _HYHomeContentState();
}
// 按钮没有添加事件之前是没有交互效果的
class _HYHomeContentState extends State<HYHomeContent> {
  @override
  Widget build(BuildContext context) {
    return  Column(
      children: [
       RaisedButton(
         child: Text("button"),
//         文本颜色
         textColor: Colors.deepPurple,
//         背景颜色
         color: Colors.amber,
         onPressed: (){
           print("nutton");
         },
       )
      ],
    )  ;
  }
}

?2.2.2：FlagButton(扁平按钮)? ? OutlineButton（）

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
// alt+enter :生成container
// ctrl +alt + b：查看所有的实现类
// 将statelessWidget转化为StatefulWidget：alt+enter
main() {
  runApp(MyAPP());
}
class MyAPP extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
   return MaterialApp(
     debugShowCheckedModeBanner: false,
     home:HYHomepage()
     
   );
  }
}
// 按钮
class HYHomepage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("基础的widget"),
      ),
        body: HYHomeContent(),
    );
  }
}
class HYHomeContent extends StatefulWidget {
  @override
  State<HYHomeContent> createState() => _HYHomeContentState();
}
// 按钮没有添加事件之前是没有交互效果的
class _HYHomeContentState extends State<HYHomeContent> {
  @override
  Widget build(BuildContext context) {
    return  Column(
      children: [
       RaisedButton(
         child: Text("button"),
//         文本颜色
         textColor: Colors.deepPurple,
//         背景颜色
         color: Colors.amber,
         onPressed: (){
           print("nutton");
         },
       ),
        FlatButton(
            onPressed: (){
             print("flatButton");
            },
            child:Text("flatbutton"),
           textColor: Colors.deepPurple,
//         背景颜色
           color: Colors.amber,
        ),
//       OutlineButton
            OutlinedButton(onPressed: (){
              print("Outline");
              },
             onLongPress:(){
              print("长按输出按钮ssss");
    },
              child: Text("你好"),
//              .all ：在边框之类的就是指4个边都统一设置
            style:ButtonStyle(backgroundColor:MaterialStateProperty.all(Colors.lightBlue),
                             textStyle:MaterialStateProperty.all( const TextStyle(fontSize: 10)),
                             foregroundColor:MaterialStateProperty.all(Colors.deepPurpleAccent),
//                             padding:MaterialStateProperty.all( const EdgeInsets.all(16)),
                              padding:MaterialStateProperty.all( const EdgeInsets.fromLTRB(2,2,3,4)),
                              shape: MaterialStateProperty.all(const CircleBorder(side:BorderSide(
                                color: Colors.blue,
                                width: 30,
                                style: BorderStyle.solid
                              ))),
//                              mouseCursor:MaterialStateProperty.all(SystemMouseCursors.click),
            )
            ),
      ],
    )  ;
  }
}

Image：NetworkImage

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
// alt+enter :生成container
// ctrl +alt + b：查看所有的实现类
// 将statelessWidget转化为StatefulWidget：alt+enter
main() {
  runApp(MyAPP());
}
class MyAPP extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
   return MaterialApp(
     debugShowCheckedModeBanner: false,
     home:HYHomepage()
     
   );
  }
}
// 按钮
class HYHomepage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("基础的widget"),
      ),
        body: HYHomeContent(),
    );
  }
}
class HYHomeContent extends StatefulWidget {
  @override
  State<HYHomeContent> createState() => _HYHomeContentState();
}
// 图片
class _HYHomeContentState extends State<HYHomeContent> {
  final imgUrl="https://tse1-mm.cn.bing.net/th/id/R-C.09461790447848034fed493e84383d11?rik=h0BIpUujWfZ%2bDw&riu=http%3a%2f%2fpic.netbian.com%2fuploads%2fallimg%2f160713%2f215739-14684182593cfb.jpg&ehk=jBCJ%2fv%2fySg7UBOhadT8r3FL4IE9GIFjmLUau3zQhIRk%3d&risl=&pid=ImgRaw&r=0";
  @override
  Widget build(BuildContext context) {
    return  Image(
             color:Colors.red,
            //颜色混入到图片里面去
             colorBlendMode: BlendMode.colorDodge,
             image:
             NetworkImage(imgUrl),
             width: 200,
             height: 200,
             //宽度自适应
             fit:BoxFit.fitWidth,
             //定位
             alignment: Alignment(0,-1),
    );
  }
}

本地图片设置：

1.创建assets文件夹

2.在pubspec.yaml文件夹将assets代码注释释放出来

3.执行Packages get

?改进：引入的时候不用所有的资源引进，使用*来代替，不加*也可以

?

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
// alt+enter :生成container
// ctrl +alt + b：查看所有的实现类
// 将statelessWidget转化为StatefulWidget：alt+enter
main() {
  runApp(MyAPP());
}
class MyAPP extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
   return MaterialApp(
     debugShowCheckedModeBanner: false,
     home:HYHomepage()
     
   );
  }
}
// 按钮
class HYHomepage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("基础的widget"),
      ),
        body: HYHomeContent(),
    );
  }
}
class HYHomeContent extends StatefulWidget {
  @override
  State<HYHomeContent> createState() => _HYHomeContentState();
}
// 图片
class _HYHomeContentState extends State<HYHomeContent> {
  final imgUrl="https://tse1-mm.cn.bing.net/th/id/R-C.09461790447848034fed493e84383d11?rik=h0BIpUujWfZ%2bDw&riu=http%3a%2f%2fpic.netbian.com%2fuploads%2fallimg%2f160713%2f215739-14684182593cfb.jpg&ehk=jBCJ%2fv%2fySg7UBOhadT8r3FL4IE9GIFjmLUau3zQhIRk%3d&risl=&pid=ImgRaw&r=0";
  @override
  Widget build(BuildContext context) {
    return  Image(
            image: AssetImage("assets/images/demo.jpg"),
    );
  }
}