AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2023-09-14 73
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 谷歌移动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
  }
}

运行看效果：
image.png

篇幅有限，关于Flutter的组件和布局就介绍到这里，接下来还会有一篇关于Flutter的进阶博客，感兴趣的同学可以看一看。

文章标签：
Android开发
Dart
前端开发
开发工具
关键词：
UI框架
Flutter Widget
Flutter框架
Flutter ui
UI flutter
梳中分的坤坤
目录
相关文章
lqj_本人
|
3天前
|
容器
flutter&鸿蒙next 使用 InheritedWidget 实现跨 Widget 传递状态
在 Flutter 中，状态管理至关重要。本文详细介绍了如何使用 InheritedWidget 实现跨 Widget 的状态传递。InheritedWidget 允许数据在 Widget 树中向下传递，适用于多层嵌套的场景。通过一个简单的计数器示例，展示了如何创建和使用 InheritedWidget，包括其基础概念、工作原理及代码实现。虽然 InheritedWidget 较底层，但它是许多高级状态管理解决方案的基础。
lqj_本人
65 2
二二*一一
|
4天前
|
前端开发 JavaScript
Bootstrap Web 前端 UI 框架
Bootstrap 是快速开发 Web 应用程序的前端工具包。
二二*一一
17 3
游客g5tp3lgf24cqc
|
21小时前
|
Rust JavaScript 前端开发
ES6 awaitRust UI 框架
ES6 awaitRust UI 框架
游客g5tp3lgf24cqc
8 0
二二*一一
|
22小时前
|
Rust 自然语言处理 API
Rust UI 框架的新里程碑与免版税许可证
Rust UI 框架的新里程碑
二二*一一
6 0
二二*一一
|
22小时前
|
前端开发 JavaScript
electron ui框架
Electron是一个使用JavaScript, HTML和CSS等前端技术构建跨平台桌面应用程序的框架。
二二*一一
4 0
lqj_本人
|
3天前
|
Dart JavaScript 前端开发
Flutter 的 Widget 概述与常用 Widgets 与鸿蒙 Next 的对比
Flutter 是 Google 开发的开源 UI 框架，用于快速构建高性能的移动、Web 和桌面应用。Flutter 通过 Widget 构建 UI，每个 UI 元素都是 Widget，包括文本、按钮、图片等。Widget 不仅描述外观，还描述行为，是不可变的。常见的 Widget 包括结构型（Container、Column、Row）、呈现型（Text、Image）、交互型（ElevatedButton）和状态管理型（StatefulWidget）。Flutter 与鸿蒙 Next 在组件化架构、开发语言、布局系统、性能和跨平台支持方面各有优势
lqj_本人
57 0
lqj_本人
|
3天前
|
缓存 JavaScript API
Flutter&鸿蒙next 状态管理框架对比分析
在 Flutter 开发中，状态管理至关重要，直接影响应用的性能和可维护性。本文对比分析了常见的状态管理框架，包括 setState()、InheritedWidget、Provider、Riverpod、Bloc 和 GetX，详细介绍了它们的优缺点及适用场景，并提供了 Provider 的示例代码。选择合适的状态管理框架需考虑应用复杂度、团队熟悉程度和性能要求。
lqj_本人
63 0
技术小达人
|
JSON 编解码 文字识别
Flutter UI自动化测试技术方案选型与探索
Flutter页面无法直接使用Native测试工具定位元素，给自动化测试带来很多不便。虽然Google官方推出了Flutter driver 和 Integration test，但是在实际使用中存在以下问题：
技术小达人
625 0
Flutter UI自动化测试技术方案选型与探索
游客zi3qmblbcdexu
|
30天前
|
Android开发 iOS开发 容器
鸿蒙harmonyos next flutter混合开发之开发FFI plugin
鸿蒙harmonyos next flutter混合开发之开发FFI plugin
游客zi3qmblbcdexu
104 2
zacksleo
|
19天前
|
开发者
鸿蒙Flutter实战：07-混合开发
鸿蒙Flutter混合开发支持两种模式：1) 基于har包，便于主项目开发者无需关心Flutter细节，但不支持热重载；2) 基于源码依赖，利于代码维护与热重载，需配置Flutter环境。项目结构包括AppScope、flutter_module等目录，适用于不同开发需求。
zacksleo
53 3

热门文章

最新文章

  • 1
    Flutter之禅 内存优化篇
  • 2
    Flutter 61: 图解基本 Button 按钮小结 (一)
  • 3
    打通前后端逻辑，客户端Flutter代码一天上线
  • 4
    Flutter新锐专家之路：混合开发篇
  • 5
    Flutter Plugin调用Native APIs
  • 6
    GMTC-闲鱼Flutter实践效果访谈
  • 7
    在 Dart（以及 Flutter）中生成随机字符串的 3 种不同方法【Flutter 专题 21】
  • 8
    Flutter+Serverless 端到端研发架构实践
  • 9
    从零开始，一起学习开发个 Flutter App 吧
  • 10
    Flutter的AnimatedDefaultTextStyle实现文本样式的动画过渡切换效果
  • 1
    如何优雅的只在当前页面中覆盖ui库中组件的样式（vue的问题）
    60
  • 2
    UI库的按需加载（vue的问题）
    38
  • 3
    Android为什么不能在子线程更新UI
    72
  • 4
    移动应用开发中的UI设计趋势与技术创新
    102
  • 5
    Qt中实现界面回放的艺术：从理论到代码“ (“The Art of Implementing UI Playback in Qt: From Theory to Code
    143
  • 6
    机器学习PAI常见问题之web ui 项目启动后页面打不开如何解决
    276
  • 7
    【Qt UI相关】Qt中如何控制 窗口的最大化、最小化和关闭按钮？一文带你掌握用法
    1082
  • 8
    【Qt UI相关】Qt5和Qt6中关于高DPI缩放属性
    643
  • 9
    element ui实现多层级复杂表单的操作（添加与回显）之回显功能实现
    53
  • 10
    element ui实现多层级复杂表单的操作（添加与回显）之添加功能实现
    115

    • 相关课程

    更多
  • 开源Android容器化框架Atlas开发者指南
  • React 入门教程开发文档

    • 相关电子书

    更多
  • 基于flutter的产品应用实践
  • 使用TensorFlow搭建智能开发系统自动生成App UI
  • 《Flutter in action》
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月