首页 > > 程序设计 > Java技术 >

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

2019-08-26 06:55:13来源：博客园 阅读 ()

新老客户大回馈,云服务器低至5折

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

引言

在之间我已经介绍了关于Flutter的下载安装以及配置，还有开发工具Android Studio的配置，还不知道的同学可以看看我这篇博客——谷歌移动UI框架Flutter入门。这里为什么非要用Android Studio，我可以解释一下。Android Studio是Google的亲儿子，由谷歌一手开发，而Flutter也是谷歌推出的技术，所以在支持和兼容问题上，Android Studio是非常有优势的。老话说得好，肥水不流外人田，谷歌内部肯定是将Android Studio对Flutter的优化做到最佳的。

Widget基本组件

那么话不多说，我们先来熟悉一下关于Flutter的Widget组件，在Flutter中，一切皆组件，TextView、Image、Row、Column等等，都统称组件。

1.文本组件(Text)

首先，我们就来了解一下文本组件(Text)。学过前端的同学对UI部分应该都很了解，那Flutter当然也没有什么特别的，无非也就是文本内容、大小、字体样式、颜色等等的设置，那么首先我们就先来编写一个案例。找到lib目录下的main.dart，我们将在这个文件中编写代码。

import 'package:flutter/material.dart';

void main() {
  runApp(MyTextApp());
}

/**
 * 文本组件(Text)的使用
 */
class MyTextApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Text Demo',
      home: Scaffold(
        appBar: AppBar(title: Text('文本控件的使用'),),
        body: Center(
          child: Text(
            '这是一个文本控件', //文本内容
            textAlign: TextAlign.center, //居中
            maxLines: 1, //最大显示行数
            style: TextStyle(
              fontSize: 25.0, //字体大小
              color: Colors.lightBlue, //字体颜色
            ), //样式
          ),
        ),
      ),
    );
  }
}

有语言基础的同学相信可以很好理解这些代码，第一行导入了Material相关的类库。程序会先执行main()方法，该方法又执行了runApp()方法，并将MyTextApp类作为参数传递。而MyTextApp类就是我们自定义的一个类，该类需要去继承StatelessWidget，并重写build()方法，该方法需要返回一个组件。具体的代码我就不一一介绍了，可以先不用理解每一行代码的意思。其中的Text便是文本组件，只需将值写入括号，便可以在文本框中显示，然后是文本框的一些属性。接下来我们运行起来看一下。
在这里插入图片描述

2.图片组件(Image)

接下来是图片组件，图片组件的作用无非就是显示图片，在Flutter中，Image有四种方式显示图片，我只介绍一种，就是显示网络图片，其它三种方式没有太大差别。

import 'package:flutter/material.dart';

void main() {
  runApp(MyImageApp());
}

/**
 * 图片组件(Image)的使用
 */
class MyImageApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Text Demo',
      home: Scaffold(
        appBar: AppBar(title: Text('图片组件的使用')),
        body: Center(
          child: Image.network(
            'https://www.baidu.com/img/baidu_jgylogo3.gif', //图片地址
            scale: 1.0, //缩放比
          ),
        ),
      ),
    );
  }
}

运行效果如下：
在这里插入图片描述

3.列表组件(ListView)

列表组件在移动端的开发中使用非常频繁，那么在Flutter中，该如何使用ListView呢？

import 'package:flutter/material.dart';

void main() {
  runApp(MyListViewApp());
}

/**
 * 列表组件(List)的使用
 */
class MyListViewApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Text Demo',
      home: Scaffold(
        appBar: AppBar(title: Text('图片组件的使用')),
        body: Center(
          child: Container(
            height: 200.0,
            child: ListView(
              scrollDirection: Axis.horizontal,,//列表方向(纵向)
              children: <Widget>[
                Container(
                  width: 180.0,
                  color: Colors.lightBlue,
                ), Container(
                  width: 180.0,
                  color: Colors.amber,
                ), Container(
                  width: 180.0,
                  color: Colors.deepOrange,
                ), Container(
                  width: 180.0,
                  color: Colors.deepPurple,
                ), //Container
              ], //Widget[]
            ),
          ),
        ),
      ),
    );
  }
}

有些同学看到这样的代码可能惊呆了，这么多层的嵌套维护起来岂不是很麻烦，其实这也是Dart语法的特点，避免不了，但是还是有办法的，我们可以把ListView单独抽出来，这样主体的代码将会简洁很多。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FlutterApp',
      home: Scaffold( //主页
        appBar: AppBar(title: Text('FlutterDemo')), //标题
        body: Center(
          child: Container(
            height: 200.0,
            child: MyList(), //ListView
          ), //Container
        ), //主体
      ), //Scaffold
    ); //MaterialApp
  }
}

class MyList extends StatelessWidget {

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

现在运行看一下效果。
在这里插入图片描述
当然，这样编写列表在实际开发中是不现实的，我们应该让列表活起来，所以，下面介绍如何实现动态列表。

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: 'FlutterApp',
      home: Scaffold( //主页
        appBar: AppBar(title: Text('FlutterDemo')), //标题
        body: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text('${items[index]}'),
            );
          },
        ),
      ), //Scaffold
    ); //MaterialApp
  }
}

这样就实现了动态列表，只不过这个数据还是自己提供的，只需要后期通过网络获取数据再封装成集合然后传递即可。不懂Dart语法的同学对于里面的某些代码可能会觉得难以理解，但是不用担心。即使没有一点Dart语言基础的同学也是可以很容易地学会Flutter的，只不过在某些Dart语法上就只能死记了，记住它，不用管为什么。那么现在来运行看下效果。
在这里插入图片描述

4.列表组件(GridView)

第二个列表组件，网格组件，该组件在如今的移动应用中也非常常见，最典型的便是系统相册。那么我们关心的是在Flutter中该如何去使用GridView呢？通过一个例子来了解一下。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FlutterApp',
      home: Scaffold( //主页
          appBar: AppBar(title: Text('FlutterDemo')), //标题
          body: GridView(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                mainAxisSpacing: 2.0, //纵轴边距
                crossAxisSpacing: 2.0, //横轴边距
                childAspectRatio: 0.7 //缩放比例(宽高比)
            ),
            children: <Widget>[
              Image.network(
                  'http://img5.mtime.cn/mg/2019/05/31/163641.36482297_270X405X4.jpg',
                  fit: BoxFit.cover),
              Image.network(
                  'http://img5.mtime.cn/mg/2019/07/01/091243.35485139_270X405X4.jpg',
                  fit: BoxFit.cover),
              Image.network(
                  'http://img5.mtime.cn/mg/2019/06/28/141449.40971533_270X405X4.jpg',
                  fit: BoxFit.cover),
              Image.network(
                  'http://img5.mtime.cn/mg/2019/05/31/163641.36482297_270X405X4.jpg',
                  fit: BoxFit.cover),
              Image.network(
                  'http://img5.mtime.cn/mg/2019/07/01/091243.35485139_270X405X4.jpg',
                  fit: BoxFit.cover),
              Image.network(
                  'http://img5.mtime.cn/mg/2019/06/28/141449.40971533_270X405X4.jpg',
                  fit: BoxFit.cover),
            ], //Widget[]
          ) //GridView
      ), //Scaffold
    ); //MaterialApp
  }
}

网格组件其实也非常的简单，和ListView其实没有什么差别，最主要的就是它独特的属性，这些属性在官网文档中都有解释和示例。那么这段代码运行的效果如何呢？我们看一下：
在这里插入图片描述

布局

Flutter中基本的一些组件就介绍完了，但是光知道如何编写组件可远远不够，UI设计中的布局管理也尤为重要，那么，我们继续深入，了解一下Flutter中的布局。

1.水平布局(Row)

经过前面基本组件的学习，会发现Flutter无非就是一些组件的嵌套，但注意嵌套级别，不要被自己的代码搞晕了，那么布局其实是一样的。我们看一个例子。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Row Widget Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('水平方向布局'),
        ), //AppBar
        body: Row(
          children: <Widget>[
            RaisedButton(
              onPressed: () {},
              color: Colors.redAccent,
              child: Text('Red Button'),
            ),RaisedButton(
              onPressed: () {},
              color: Colors.orangeAccent,
              child: Text('Orange Button'),
            ),RaisedButton(
              onPressed: () {},
              color: Colors.lightBlue,
              child: Text('Blue Button'),
            ),
          ], //Widget[]
        ), //Row
      ), //Scaffold
    ); //MaterialApp
  }
}

Row即是水平布局，那么水平布局中我们放置了三个按钮，现在，运行看效果。
在这里插入图片描述
会发现 ，这个按钮的右边空出了一块，这是为什么呢？其实是因为我们使用的是一个不灵活的水平布局，那么既然有不灵活的水平布局，那就肯定会有灵活的水平布局。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Row Widget Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('水平方向布局'),
        ), //AppBar
        body: Row(
          children: <Widget>[
            Expanded(child: RaisedButton(
              onPressed: () {},
              color: Colors.redAccent,
              child: Text('Red Button'),
            )), Expanded(child: RaisedButton(
              onPressed: () {},
              color: Colors.orangeAccent,
              child: Text('Orange Button'),
            )), Expanded(child: RaisedButton(
              onPressed: () {},
              color: Colors.lightBlue,
              child: Text('Blue Button'),
            )),
          ], //Widget[]
        ), //Row
      ), //Scaffold
    ); //MaterialApp
  }
}

我们并没有对代码进行过多的修改，只是在每个按钮外部包了一个Expanded组件，那么现在我们来看一下运行效果：
在这里插入图片描述
会发现，按钮成功自适应屏幕了，这才是我们想要的效果。

2.垂直布局(Column)

既然有水平布局，当然就有垂直布局。现在通过一个例子来理解一下垂直布局。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Row Widget Demo',
      home: Scaffold(
          appBar: AppBar(
            title: Text('水平方向布局'),
          ), //AppBar
          body: Column(
            children: <Widget>[
              Text('Column 1'),
              Text('This is Column 2'),
              Text('Column 3'),
            ], //Widget
          ) //Column
      ), //Scaffold
    ); //MaterialApp
  }
}

应该不难理解，道理是一样的，现在看一下效果：
在这里插入图片描述
细心的同学会发现，它默认会有一个居中的对齐方式。但有同学提出疑问了，这也没居中啊，这不还是在屏幕的左侧吗？其实这个对齐是相对Column来说的，这个Column的大小是由最长的Text组件决定的。通过crossAxisAlignment属性可以设置Column的对齐方式。

3.层叠布局(Stack)

使用水平布局和垂直布局虽然可以实现大部分的布局效果，但是如果要在一张图片上显示一段文字，这两种布局将无法实现。所以，这里我们学习一种层叠布局，它能够很轻松地实现这个效果。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    var stack = Stack(
      alignment: const FractionalOffset(0.5, 0.8),
      children: <Widget>[
        CircleAvatar(
          backgroundImage: NetworkImage(
              'https://i0.hdslb.com/bfs/archive/79c30cf5850cb9ec9d6129b200145e1644f696f8.jpg@880w_440h.jpg'),
          radius: 100.0,
        ), //CircleAvatar
        Container(
          decoration: BoxDecoration(
              color: Colors.lightBlue
          ),
          padding: EdgeInsets.all(5.0),
          child: Text('层叠布局'),
        )
      ], //Widget[]
    ); //Stack
    return MaterialApp(
      title: 'Row Widget Demo',
      home: Scaffold(
          appBar: AppBar(
            title: Text('水平方向布局'),
          ), //AppBar
          body: Center(
            child: stack,
          )
      ), //Scaffold
    ); //MaterialApp
  }
}

我们首先创建一个组件变量，将我们的图片和文字都定义在里面，然后通过alignment属性可以决定文本组件的相对位置，看一下效果：
在这里插入图片描述

4.卡片布局(Card)

最后一个布局，卡片布局。来看例子。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    var card = Card(
      child: Column(
        children: <Widget>[
          ListTile(
            title: Text(
              '江西省南昌市青云谱区', style: TextStyle(fontWeight: FontWeight.w500),),
            subtitle: Text('Temptation:123456789'),
            leading: Icon(Icons.account_box, color: Colors.lightBlue,),
          ),
          new Divider(),
          ListTile(
            title: Text(
              '北京市海淀区中国科技大学', style: TextStyle(fontWeight: FontWeight.w500),),
            subtitle: Text('Temptation:123456789'),
            leading: Icon(Icons.account_box, color: Colors.lightBlue,),
          ),
          new Divider(),
          ListTile(
            title: Text(
              '河南省濮阳市百姓办公楼', style: TextStyle(fontWeight: FontWeight.w500),),
            subtitle: Text('Temptation:123456789'),
            leading: Icon(Icons.account_box, color: Colors.lightBlue,),
          ) //ListTile
        ], //Widget[]
      ), //Column
    ); //Card

    return MaterialApp(
      title: 'Row Widget Demo',
      home: Scaffold(
          appBar: AppBar(
            title: Text('水平方向布局'),
          ), //AppBar
          body: Center(
              child: card
          )
      ), //Scaffold
    ); //MaterialApp
  }
}

运行看效果：
在这里插入图片描述
篇幅有限，关于Flutter的组件和布局就介绍到这里，接下来还会有一篇关于Flutter的进阶博客，感兴趣的同学可以看一看。


原文链接:https://www.cnblogs.com/blizzawang/p/11411681.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：Github使用教程图文详解

下一篇：DBUtils框架的使用(下)

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签