Flutter开发之Widget学习

Posted jyd0124

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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组件

加入图片的方式:

  1. Image.asset                  项目资源图片
  2. Image.file (绝对路径)    系统资源图片
  3. 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: 向纵向网格空挡

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

以上是关于Flutter开发之Widget学习的主要内容,如果未能解决你的问题,请参考以下文章

Flutter学习-flutter开发初体验

Flutter开发之Widget布局和页面导航

Flutter开发之基础Widget

Flutter开发之Widget布局和页面导航

Flutter开发之滚动Widget

谷歌移动UI框架Flutter教程之Widget