Flutter开发之Widget学习

一、Text 组件

属性

textAlign: TextAlign.left, -----文本对齐方式

maxLines: 1, -----显示最大行

overflow: TextOverflow.clip, -----文本溢出的处理方式

clip：直接切断溢出的文字。
ellipsis:在后边显示省略号（...）常用
fade: 渐变消失效果

style文字的样式

 body: new Center(

          child: new Text('非淡泊无以明志，非宁静无以致远。(诸葛亮)',

              textAlign: TextAlign.left,

              maxLines: 1,

              overflow: TextOverflow.ellipsis,

              style: TextStyle(

                fontSize: 20,

                color: Color.fromARGB(255, 0, 0, 255),

                decoration: TextDecoration.underline,

                decorationStyle: TextDecorationStyle.solid,

                fontStyle: FontStyle.italic,

              )),

        ),

二、Container组件

Alignment属性，Container内child的对齐方式，也就是容器子内容的对齐方式，并不是容器本身的对齐方式。

padding 内边距

margin 外边距

decoration 装饰器

使用：

body: new Center(

          child: new Container(

            child: new Text(

              '非淡泊无以明志，非宁静无以致远。(诸葛亮)',

              style: TextStyle(fontSize: 30.0),

            ),

            alignment: Alignment.topLeft,

            width: 500.0,

            height: 200.0,

            //color: Colors.lightBlue,

            //padding: const EdgeInsets.all(10),    //内边距

            padding: const EdgeInsets.fromLTRB(10.0, 50.0, 0, 0),

            margin: const EdgeInsets.all(20.0),

            decoration: new BoxDecoration(

              gradient: const LinearGradient(

                  colors: [Colors.lightBlue, Colors.green, Colors.purple]

                  ),

                  border: Border.all(width: 5.0,color:Colors.red

                  ),

            ),

          ),

        ),

三、Image组件

加入图片的方式：

Image.asset 项目资源图片
Image.file (绝对路径) 系统资源图片
Image.network（url）网络资源图片

fit属性

BoxFit.fill
BoxFit.contain
BoxFit.cover

repeat属性

ImageRepeat.repeat 横向和纵向都重复，铺满整个容器
ImageRepeat.repeatX 横向重复
ImageRepeat.repeatY 纵向重复

body: new Center(

            child: new Container(

          child: new Image.network(

            'https://profile.csdnimg.cn/0/5/2/1_jyd0124',

            fit: BoxFit.cover,

            //color: Colors.lightBlue,

            //colorBlendMode: BlendMode.darken, //图片混合模式（colorBlendMode）和color属性配合使用

          ),

          width: 300.0,

          height: 200.0,

          color: Colors.lightGreen,

        )

    ),

四、ListView组件

列表使用

body: new ListView(

          children: <Widget>[

            /*new Image.network(

                'https://cdn2.jianshu.io/assets/web/banner-s-club-aa8bdf19f8cf729a759da42e4a96f366.png'),

            new Image.network(

                'https://cdn2.jianshu.io/assets/web/banner-s-7-1a0222c91694a1f38e610be4bf9669be.png'),

             */ //图片列表使用

            new ListTile(

              leading: new Icon(

                Icons.perm_camera_mic,

              ),

              title: new Text('perm_camera_mic'),

            ),

            new ListTile(

              leading: new Icon(

                Icons.perm_phone_msg,

              ),

              title: new Text('perm_phone_msg'),

            ),

          ],

        ),

横向列表：ListView组件里加一个scrollDirection属性

body: new Center(

            child: new Container(

                height: 200.0,

                child: new ListView(

                  scrollDirection: Axis.horizontal, //Axis.vertical:纵向列表

                  children: <Widget>[

                    new Container(

                      width: 230.0,

                      color: Colors.lightBlue,

                    ),

                    new Container(

                      width: 230.0,

                      color: Colors.lightGreen,

                    ),

                  ],

                ))),

Dart语言List的声明方式：

var myList = List(): 非固定长度的声明。
var myList = List(2): 固定长度的声明。
var myList= List<String>():固定类型的声明方式。
var myList = [1,2,3]: 对List直接赋值

import 'package:flutter/material.dart';

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: 'ListView Dome',

      home: new Scaffold(

        appBar: new AppBar(title: new Text('ListView Widget')),

        body: new ListView.builder(

            itemCount: items.length,

            itemBuilder: (context, index) {

              return new ListTile(

                title: new Text('${items[index]}'),

              );

            }),

      ),

    );

  }

}

五、GridView组件

常用属性：

crossAxisSpacing:网格间的空当。
crossAxisCount:一行放置的网格数量

body: GridView.count(

            padding: EdgeInsets.all(20.0),

            crossAxisSpacing: 10.0,

            crossAxisCount: 3,

            children: <Widget>[

              const Text('I am j.y.d'),

              const Text('I love flutter'),

              const Text('jyd0124.com'),

              const Text('2020/02/06'),

              const Text('Come on,China!'),

              const Text('Come on,Wuhan!'),

            ],

          ),

官方已经不鼓励使用这种方法，另一种写法为

body: GridView(

           gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(

             crossAxisCount: 3,

             mainAxisSpacing: 2.0,

             crossAxisSpacing: 2.0,

             childAspectRatio: 0.75,

             ),

            children: <Widget>[

              new Image.network('http://img5.mtime.cn/mg/2019/10/02/105324.67493314_170X256X4.jpg',fit:BoxFit.cover),

              new Image.network('http://img5.mtime.cn/mg/2019/09/26/092514.83698073_170X256X4.jpg',fit:BoxFit.cover),

              new Image.network('http://img5.mtime.cn/mg/2019/11/07/111316.10093613_170X256X4.jpg',fit:BoxFit.cover),

              new Image.network('http://img5.mtime.cn/mg/2019/12/13/094432.64997517_170X256X4.jpg',fit:BoxFit.cover),

              new Image.network('http://img31.mtime.cn/mt/2014/02/22/230757.74994253_220X124X4.jpg',fit:BoxFit.cover),

              new Image.network('http://img5.mtime.cn/mg/2019/07/10/164947.40820910_170X256X4.jpg',fit:BoxFit.cover),

            ],

        ),

childAspectRatio:宽高比
mainAxisSpacing:横向网格空档
crossAxisSpacing: 向纵向网格空挡

至此，使用组件的学习就到这儿了，下篇我们将学习布局的相关知识！

巴特西