flutter基础

最新推荐文章于 2022-07-14 14:03:46 发布

yang_web

最新推荐文章于 2022-07-14 14:03:46 发布

阅读量141

点赞数 1

文章标签： flutter app android ios

本文链接：https://blog.csdn.net/yang_web/article/details/120670167

版权

StatefulWidget和StatelessWidget

StatefulWidget ：具有可变状态的窗口部件，也就是你在使用应用的时候就可以随时变化，比如我们常见的进度条，随着进度不断变化。
StatelessWidget：不可变状态窗口部件，也就是你在使用时不可以改变，比如固定的文字（写上后就在那里了，死也不会变了）。

第01节：Text Widget 文本组件的使用

import 'package:flutter/material.dart';
void main () => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
      return MaterialApp(
        title:'Text widget',
        home:Scaffold(
          body:Center(
            child:Text('Hello JSPang')
          ),
        ),
      );
  }
}
-------------------------------------
new Text(
  'Hello World t am is web',
  textAlign: TextAlign.center,
  maxLines: 1,
  overflow: TextOverflow.ellipsis,
  style: TextStyle(
  fontSize: 25.0,
  color: Color.fromARGB(255, 255, 150, 150),
  decoration: TextDecoration.underline,
  decorationStyle: TextDecorationStyle.solid,
    ),
 ),

TextAlign属性
TextAlign属性就是文本的对齐方式，它的属性值有如下几个（详细请看视频中讲解）：

center: 文本以居中形式对齐,这个也算比较常用的了。
left:左对齐，经常使用，让文本居左进行对齐，效果和start一样。
right :右对齐，使用频率也不算高。
start:以开始位置进行对齐，类似于左对齐。
end: 以为本结尾处进行对齐，不常用。有点类似右对齐.

maxLines属性

设置最多显示的行数，比如我们现在只显示1行，类似一个新闻列表的题目

overflow属性

overflow属性是用来设置文本溢出时，如何处理,它有下面几个常用的值供我们选择。

clip：直接切断，剩下的文字就没有了，感觉不太友好，体验性不好。
ellipsis:在后边显示省略号，体验性较好，这个在工作中经常使用。
fade: 溢出的部分会进行一个渐变消失的效果，当然是上线的渐变，不是左右的哦。

style属性

style: TextStyle(
    fontSize:25.0,
    color:Color.fromARGB(255, 255, 150, 150),
    decoration:TextDecoration.underline,
    decorationStyle:TextDecorationStyle.solid,
  ),
  ...........
  https://docs.flutter.io/flutter/painting/TextStyle-class.html

第02节：Container容器组件的使用

Container（容器控件）在Flutter是经常使用的控件，它就相当于我们HTML里的
标签

class MyApp extends StatelessWidget {
  //重写build方法
  @override
  Widget build(BuildContext context) {
    //返回一个Material风格的组件
    return MaterialApp(
      title: 'Welcome to Flutteraa',
      home: Scaffold(
        //创建一个Bar，并添加文本
        appBar: AppBar(
          title: Text(
            'Welcome to Flutter web',
          ),
        ),
        //在主体的中间区域，添加一个hello world 的文本
        body: Center(
          child: Container(
            child: new Image.network(
              'https://img0.baidu.com/it/u=3122136587,3938996930&fm=26&fmt=auto',
              scale: 1.0,
              fit: BoxFit.cover,
              color: Colors.greenAccent, //混和颜色
              colorBlendMode: BlendMode.darken, //混合模式
            ),
            alignment: Alignment.center,
            width: 500.0,
            height: 400.0,
            // color: Colors.lightBlue,
            padding: const EdgeInsets.fromLTRB(
                10.0, 10.0, 10.0, 10.0), //EdgeInsets.all(10.0)
            margin: const EdgeInsets.all(10.0),
            decoration: new BoxDecoration(
                gradient: const LinearGradient(
                    colors: [Colors.lightBlue, Colors.purple, Colors.cyan]),
                border: Border.all(width: 2.0, color: Colors.red)),
          ),
        ),
      ),
    );
  }
}

Alignment属性

其实容器的作用就是方便我们进行布局的，Flutter这点也作的很好，我们先来看容器属性中的Alignment。

这个属性针对的是Container内child的对齐方式，也就是容器子内容的对齐方式，并不是容器本身的对齐方式。
bottomCenter:下部居中对齐。
botomLeft: 下部左对齐。
bottomRight：下部右对齐。
center：纵横双向居中对齐。
centerLeft：纵向居中横向居左对齐。
centerRight：纵向居中横向居右对齐。
topLeft：顶部左侧对齐。
topCenter：顶部居中对齐。
topRight： 顶部居左对齐。

设置宽、高和颜色属性

 width:500.0,
 height:400.0,

padding和margin

padding:const EdgeInsets.fromLTRB(10.0,30.0,0.0,0.0),
padding:const EdgeInsets.all(10.0),
margin: const EdgeInsets.all(10.0),
margin: const EdgeInsets.fromLTRB(10.0,30.0,0.0,0.0),

decoration属性

decoration是 container 的修饰器，主要的功能是设置背景和边框。

比如你需要给背景加入一个渐变，这时候需要使用BoxDecoration这个类
decoration:new BoxDecoration(
    gradient:const LinearGradient(
      colors:[Colors.lightBlue,Colors.greenAccent,Colors.purple]
    ),
    border:Border.all(width:2.0,color:Colors.red)
),

第03节：Image图片组件的使用

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
      return MaterialApp(
        title:'Text widget',
        home:Scaffold(
          body:Center(
          child:Container(
            child:new Image.network(
              'http://jspang.com/static/myimg/blogtouxiang.jpg',
              scale:1.0,
              fit: BoxFit.cover,
              color: Colors.greenAccent, //混和颜色
              colorBlendMode: BlendMode.darken, //混合模式
               repeat: ImageRepeat.repeat,
            ),
            width:300.0,
            height:200.0,
            color: Colors.lightBlue,
          ),
          ),
        ),
      );
  }
}

fit属性的设置

fit属性可以控制图片的拉伸和挤压，这些都是根据图片的父级容器来的，我们先来看看这些属性（建议此部分组好看视频理解）。

BoxFit.fill:全图显示，图片会被拉伸，并充满父容器。

BoxFit.contain:全图显示，显示原比例，可能会有空隙。

BoxFit.cover：显示可能拉伸，可能裁切，充满（图片要充满整个容器，还不变形）。

BoxFit.fitWidth：宽度充满（横向充满），显示可能拉伸，可能裁切。

BoxFit.fitHeight ：高度充满（竖向充满）,显示可能拉伸，可能裁切。

BoxFit.scaleDown：效果和contain差不多，但是此属性不允许显示超过源图片大小，可小不可大。

-repeat图片重复

ImageRepeat.repeat : 横向和纵向都进行重复，直到铺满整个画布。

ImageRepeat.repeatX: 横向重复，纵向不重复。

ImageRepeat.repeatY：纵向重复，横向不重复。

第04节：ListView 列表组件简介

body: new ListView(
  children:<Widget>[
    new ListTile(
      leading:new Icon(Icons.access_time),
      title:new Text('access_time')
    ),
    new ListTile(
      leading:new Icon(Icons.account_balance),
      title:new Text('account_balance')
    ),
  ]
),
//图片列表
body: new ListView(
  children:<Widget>[
   new Image.network(
      'http://jspang.com/static/upload/20181111/G-wj-ZQuocWlYOHM6MT2Hbh5.jpg'
    ),
     new Image.network(
      'http://jspang.com/static/upload/20181109/1bHNoNGpZjyriCNcvqdKo3s6.jpg'
    ),
     new Image.network(
      'http://jspang.com/static/myimg/typescript_banner.jpg'
    ),new Image.network(
      'http://jspang.com/static/myimg/smile-vue.jpg'
    )

  ]
),

第05节：横向列表的使用

import 'package:flutter/material.dart';
void main () => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
      return MaterialApp(
        title:'ListView widget',
        home:Scaffold(
          body:Center(
          child:Container(
            height:200.0,
            child:MyList()
            ),
          ),
        ),
      );
  }
}


class MyList extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return ListView(
        scrollDirection: Axis.horizontal,
        children: <Widget>[
          new Container(
            width:180.0,
            color: Colors.lightBlue,
          ), new Container(
            width:180.0,
            color: Colors.amber,
          ), new Container(
            width:180.0,
            color: Colors.deepOrange,
          ),new Container(
            width:180.0,
            color: Colors.deepPurpleAccent,
          ),
        ],
    );
  }
}

scrollDirection属性

ListView组件的scrollDirection属性只有两个值，一个是横向滚动，一个是纵向滚动。默认的就是垂直滚动，所以如果是垂直滚动，我们一般都不进行设置。

Axis.horizontal:横向滚动或者叫水平方向滚动。
Axis.vertical:纵向滚动或者叫垂直方向滚动。

第06节：动态列表的使用

List是Dart的集合类型之一,其实你可以把它简单理解为数组

import 'package:flutter/material.dart';
void main () => runApp(MyApp(
  items: new List<String>.generate(1000, (i)=> "Item $i")
));

//动态列表 ListView.builder()

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:'ListView widget',
        home:Scaffold(
          body:new ListView.builder(
            itemCount:items.length,
            itemBuilder:(context,index){
              return new ListTile(
                title:new Text('${items[index]}'),
              );
            }
          )
        ),
      );
  }
}

第07节：GridView网格列表组件

GridView.count

padding:表示内边距，这个小伙伴们应该很熟悉。
crossAxisSpacing:网格间的空当，相当于每个网格之间的间距。
crossAxisCount:网格的列数，相当于一行放置的网格数量。

import 'package:flutter/material.dart';
void main () => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
      return MaterialApp(
        title:'ListView widget',
        home:Scaffold(
          body:GridView.count(
            padding:const EdgeInsets.all(20.0),
            crossAxisSpacing: 10.0,
            crossAxisCount: 3,
            children: <Widget>[
              const Text('I am Jspang'),
              const Text('I love Web'),
              const Text('jspang.com'),
              const Text('我喜欢玩游戏'),
              const Text('我喜欢看书'),
              const Text('我喜欢吃火锅')
            ],
          )
        ),
      );
  }
}

class MyApp extends StatelessWidget {
  final List<int> items;
  MyApp({Key key, @required this.items}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ListView widget',
      home: Scaffold(
          body: GridView(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2, //每行2个
            mainAxisSpacing: 10.0, //主轴(竖直)方向间距
            crossAxisSpacing: 10.0, //纵轴(水平)方向间距
            childAspectRatio: 1.0 //纵轴缩放比例
            ),
        children: <Widget>[
          new Image.network(
              'https://img0.baidu.com/it/u=3122136587,3938996930&fm=26&fmt=auto',
              fit: BoxFit.cover),
          new Image.network(
              'https://img0.baidu.com/it/u=3122136587,3938996930&fm=26&fmt=auto',
              fit: BoxFit.cover),
          new Image.network(
              'https://img0.baidu.com/it/u=3122136587,3938996930&fm=26&fmt=auto',
              fit: BoxFit.cover),
          new Image.network(
              'https://img0.baidu.com/it/u=3122136587,3938996930&fm=26&fmt=auto',
              fit: BoxFit.cover),
          new Image.network(
              'https://img0.baidu.com/it/u=3122136587,3938996930&fm=26&fmt=auto',
              fit: BoxFit.cover),
          new Image.network(
              'https://img0.baidu.com/it/u=3122136587,3938996930&fm=26&fmt=auto',
              fit: BoxFit.cover),
          new Image.network(
              'https://img0.baidu.com/it/u=3122136587,3938996930&fm=26&fmt=auto',
              fit: BoxFit.cover),
          new Image.network(
              'https://img0.baidu.com/it/u=3122136587,3938996930&fm=26&fmt=auto',
              fit: BoxFit.cover),
          new Image.network(
              'https://img0.baidu.com/it/u=3122136587,3938996930&fm=26&fmt=auto',
              fit: BoxFit.cover),
        ],
      )),
    );
  }
}