首页 > 其他分享 > 给Android开发者Flutter上手指南

给Android开发者Flutter上手指南

时间:2023-05-28 14:45:21浏览次数:51  
标签:widget Text override 开发者 widgets Android ListView Flutter

给Android开发者Flutter上手指南

[给Android开发者Flutter上手指南_慕课手记](https://www.imooc.com/article/315337)

目录

  • LinearLayout 在Flutter中等价于什么(Android)?
  • RelativeLayout 在Flutter中等价于什么(Android)?
  • 如何使用widget定义布局属性?
  • 如何分层布局?
  • 如何设置布局样式?
  • ScrollView在Flutter中等价于什么?
  • 谁是Flutter的列表组件?
  • 如何知道点击了列表中哪个item?
  • 如何动态更新ListView?

LinearLayout 在Flutter中等价于什么(Android)?

在Android中,使用LinearLayout来使你的控件呈水平或垂直排列。在Flutter中,你可以使用Row或Co​​lumn widget来实现相同的结果:

@override  
Widget build(BuildContext context) {  
  return Row(  
    mainAxisAlignment: MainAxisAlignment.center,  
    children: <Widget>[  
      Text('Row One'),  
      Text('Row Two'),  
      Text('Row Three'),  
      Text('Row Four'),  
    ],  
  );  
}  
@override  
Widget build(BuildContext context) {  
  return Column(  
    mainAxisAlignment: MainAxisAlignment.center,  
    children: <Widget>[  
      Text('Column One'),  
      Text('Column Two'),  
      Text('Column Three'),  
      Text('Column Four'),  
    ],  
  );  
}  

要了解有关构建线性布局的更多信息,可参考区贡献的媒体文章Flutter For Android Developers : How to design LinearLayout in Flutter?

RelativeLayout 在Flutter中等价于什么(Android)?

RelativeLayout用于使widget相对于彼此位置排列。在Flutter中,有几种方法可以实现相同的结果

您可以通过使用ColumnRowStack的组合来实现RelativeLayout的效果。您可以为widget构造函数指定相对于父组件的布局规则。

推荐参考在StackOverflow上的一个在Flutter中构建RelativeLayout的例子。

如何使用widget定义布局属性?

在Flutter中,布局主要由专门设计用于提供布局的小部件定义,并结合控件widget及其样式属性。

例如,  和  widgets 控制一个数组中的条目 并且 分别垂直和水平对齐它们。 Container widget 控制一个布局的样式和属性, 并且 Center widget 负责居中它的子widget。

// Flutter  
Center(  
  child: Column(  
    children: <Widget>[  
      Container(  
        color: Colors.red,  
        width: 100.0,  
        height: 100.0,  
      ),  
      Container(  
        color: Colors.blue,  
        width: 100.0,  
        height: 100.0,  
      ),  
      Container(  
        color: Colors.green,  
        width: 100.0,  
        height: 100.0,  
      ),  
    ],  
  ),  
)  

Flutter在其核心widget库中提供了各种布局小部件。 例如, PaddingAlign, 和 Stack

更多布局widget可参考 Layout Widgets

basic-layout-android
basic-layout-ios

如何分层布局?

在Android中,我们可以使用FrameLayout布局进行分层。

Flutter 使用Stack widget 控制子widget在一层。 子widgets可以完全或者部分覆盖基础widgets。

Stack控件将其子项相对于其框的边缘定位。如果您只想重叠多个子窗口小部件,这个类很有用。

// Flutter  
Stack(  
  alignment: const Alignment(0.6, 0.6),  
  children: <Widget>[  
    CircleAvatar(  
      backgroundImage: NetworkImage(  
        "https://avatars3.githubusercontent.com/u/14101776?v=4"),  
    ),  
    Container(  
      decoration: BoxDecoration(  
          color: Colors.black45,  
      ),  
      child: Text('Flutter'),  
    ),  
  ],  
)  

上一个示例使用 Stack 覆盖容器 (显示其“Text”在半透明的黑色背景上) 在’CircleAvatar之上.Stack偏移文本 使用alignment属性和Alignment`定位。

Stack.png

如何设置布局样式?

Flutter有一套独特的布局系统,PaddingCenterColumnRow、等都是widget,另外组件也通常接受用于布局样式的构造参数:比如Textwidget可以使用TextStyle属性。如果要在多个位置使用相同的文本样式, 你可以创建一个 TextStyle 类并将其应用于各个 Text widgets。

// Flutter  
var textStyle = TextStyle(fontSize: 32.0, color: Colors.cyan, fontWeight:  
   FontWeight.w600);  
   ...  
Center(  
  child: Column(  
    children: <Widget>[  
      Text(  
        'Sample text',  
        style: textStyle,  
      ),  
      Padding(  
        padding: EdgeInsets.all(20.0),  
        child: Icon(Icons.lightbulb_outline,  
          size: 48.0, color: Colors.redAccent)  
      ),  
    ],  
  ),  
)  

flutterstyling-ios
flutterstyling-ios

ScrollView在Flutter中等价于什么?

在Android中,ScrollView允许您包含一个子控件,以便在用户设备的屏幕比控件内容小的情况下,使它们可以滚动。在Flutter中,最简单的方法是使用ListView。但在Flutter中,一个ListView既是一个ScrollView,也是一个Android ListView。

在 iOS 中,你给 view 包裹上 ScrollView 来允许用户在需要时滚动你的内容。在 Flutter 中,最简单的方法是使用 ListView widget。它表现得既和 iOS 中的 ScrollView 一致,也能和 TableView 一致,因为你可以给它的 widget 做垂直排布:

@override  
Widget build(BuildContext context) {  
  return ListView(  
    children: <Widget>[  
      Text('Row One'),  
      Text('Row Two'),  
      Text('Row Three'),  
      Text('Row Four'),  
    ],  
  );  
}  

更多关于在 Flutter 中如何排布 widget 的文档,请参阅 layout tutorial

谁是Flutter的列表组件?

  • 在 iOS 中,通常用 UITableView 或 UICollectionView 来展示一个列表;
  • 在 Android 中,通常用 ListView 或 RecyclerView 来展示一个列表;
  • 在 RN 中,通常用 FlatList 或 SectionList 来展示一个列表;

在 Flutter 中,你可以用 ListView 来达到相似的实现:

import 'package:flutter/material.dart';  
  
void main() {  
  runApp(SampleApp());  
}  
  
class SampleApp extends StatelessWidget {  
  // This widget is the root of your application.  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      title: 'Sample App',  
      theme: ThemeData(  
        primarySwatch: Colors.blue,  
      ),  
      home: SampleAppPage(),  
    );  
  }  
}  
  
class SampleAppPage extends StatefulWidget {  
  SampleAppPage({Key key}) : super(key: key);  
  
  @override  
  _SampleAppPageState createState() => _SampleAppPageState();  
}  
  
class _SampleAppPageState extends State<SampleAppPage> {  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(  
        title: Text("Sample App"),  
      ),  
      body: ListView(children: _getListData()),  
    );  
  }  
  
  _getListData() {  
    List<Widget> widgets = [];  
    for (int i = 0; i < 100; i++) {  
      widgets.add(Padding(padding: EdgeInsets.all(10.0), child: Text("Row $i")));  
    }  
    return widgets;  
  }  
}  

在Android ListView中,您可以创建一个适配器,然后您可以将它传递给ListView,该适配器将使用适配器返回的内容来展示每一行,从上面代码中不难看出,在Flutter中没有adapter的等价物,我们唯一要做的就是控制这个list中要展示的数据。

如何知道点击了列表中哪个item?

import 'package:flutter/material.dart';  
  
void main() {  
  runApp(SampleApp());  
}  
  
class SampleApp extends StatelessWidget {  
  // This widget is the root of your application.  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      title: 'Sample App',  
      theme: ThemeData(  
        primarySwatch: Colors.blue,  
      ),  
      home: SampleAppPage(),  
    );  
  }  
}  
  
class SampleAppPage extends StatefulWidget {  
  SampleAppPage({Key key}) : super(key: key);  
  
  @override  
  _SampleAppPageState createState() => _SampleAppPageState();  
}  
  
class _SampleAppPageState extends State<SampleAppPage> {  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(  
        title: Text("Sample App"),  
      ),  
      body: ListView(children: _getListData()),  
    );  
  }  
  
  _getListData() {  
    List<Widget> widgets = [];  
    for (int i = 0; i < 100; i++) {  
      widgets.add(GestureDetector(  
        child: Padding(  
          padding: EdgeInsets.all(10.0),  
          child: Text("Row $i"),  
        ),  
        onTap: () {  
          print('row tapped');  
        },  
      ));  
    }  
    return widgets;  
  }  
}  

在上述代码中我们通过GestureDetector来监听item的点击事件。

如何动态更新ListView?

  • 在 Android 中,改变列表数据后通过notifyDataSetChanged来更新列表;
  • 在 iOS 中,你改变列表的数据,并通过 reloadData() 方法来通知 table 或是 collection view;

在 Flutter 中,如果你想通过 setState() 方法来更新 widget 列表,你会很快发现你的数据展示并没有变化。这是因为当 setState() 被调用时,Flutter 渲染引擎会去检查 widget 树来查看是否有什么地方被改变了。当它得到你的 ListView 时,它会使用一个==判断,并且发现两个 ListView 是相同的。没有什么东西是变了的,因此更新不是必须的。

一个更新 ListView 的简单方法是,在setState() 中创建一个新的 List,并把旧 List 的数据拷贝给新的 list。虽然这样很简单,但当数据集很大时,并不推荐这样做,来一起看个demo:

import 'package:flutter/material.dart';  
  
void main() {  
  runApp(SampleApp());  
}  
  
class SampleApp extends StatelessWidget {  
  // This widget is the root of your application.  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      title: 'Sample App',  
      theme: ThemeData(  
        primarySwatch: Colors.blue,  
      ),  
      home: SampleAppPage(),  
    );  
  }  
}  
  
class SampleAppPage extends StatefulWidget {  
  SampleAppPage({Key key}) : super(key: key);  
  
  @override  
  _SampleAppPageState createState() => _SampleAppPageState();  
}  
  
class _SampleAppPageState extends State<SampleAppPage> {  
  List widgets = [];  
  
  @override  
  void initState() {  
    super.initState();  
    for (int i = 0; i < 100; i++) {  
      widgets.add(getRow(i));  
    }  
  }  
  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(  
        title: Text("Sample App"),  
      ),  
      body: ListView(children: widgets),  
    );  
  }  
  
  Widget getRow(int i) {  
    return GestureDetector(  
      child: Padding(  
        padding: EdgeInsets.all(10.0),  
        child: Text("Row $i"),  
      ),  
      onTap: () {  
        setState(() {  
          widgets = List.from(widgets);  
          widgets.add(getRow(widgets.length + 1));  
          print('row $i');  
        });  
      },  
    );  
  }  
}  

一个推荐的、高效的且有效的做法是,使用 ListView.Builder 来构建列表。这个方法在你想要构建动态列表,或是列表拥有大量数据时会非常好用:

import 'package:flutter/material.dart';  
  
void main() {  
  runApp(SampleApp());  
}  
  
class SampleApp extends StatelessWidget {  
  // This widget is the root of your application.  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      title: 'Sample App',  
      theme: ThemeData(  
        primarySwatch: Colors.blue,  
      ),  
      home: SampleAppPage(),  
    );  
  }  
}  
  
class SampleAppPage extends StatefulWidget {  
  SampleAppPage({Key key}) : super(key: key);  
  
  @override  
  _SampleAppPageState createState() => _SampleAppPageState();  
}  
  
class _SampleAppPageState extends State<SampleAppPage> {  
  List widgets = [];  
  
  @override  
  void initState() {  
    super.initState();  
    for (int i = 0; i < 100; i++) {  
      widgets.add(getRow(i));  
    }  
  }  
  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(  
        title: Text("Sample App"),  
      ),  
      body: ListView.builder(  
        itemCount: widgets.length,  
        itemBuilder: (BuildContext context, int position) {  
          return getRow(position);  
        },  
      ),  
    );  
  }  
  
  Widget getRow(int i) {  
    return GestureDetector(  
      child: Padding(  
        padding: EdgeInsets.all(10.0),  
        child: Text("Row $i"),  
      ),  
      onTap: () {  
        setState(() {  
          widgets.add(getRow(widgets.length + 1));  
          print('row $i');  
        });  
      },  
    );  
  }  
}  

与创建一个 “ListView” 不同,创建一个 ListView.builder 接受两个主要参数:列表的初始长度,和一个 ItemBuilder 方法。

ItemBuilder 方法和 iOS的cellForItemAt 代理方法非常类似,它接受一个位置,并且返回在这个位置上你希望渲染的 cell。

最后,也是最重要的,注意 onTap() 函数里并没有重新创建一个 List,而是 add 了一个 widget。

参考

标签:widget,Text,override,开发者,widgets,Android,ListView,Flutter
From: https://www.cnblogs.com/ministep/p/17438240.html

相关文章

  • 【Android基础】【001】Android不同版本介绍
    基本介绍安卓(Android)是谷歌推出的一种基于Linux操作系统的开源智能手机操作系统。下面是各个版本的简要介绍:Android1.0:2008年9月发布,是第一个正式发布的版本。Android1.5:2009年4月发布,命名为“Cupcake”,新增了虚拟键盘、相机等功能。Android1.6:2009年9月发布,命名为“Donut......
  • Android 服务Service详解
    Android服务(Service)是一种在后台运行的组件,它可以在不与用户交互的情况下执行长时间运行的操作。服务通常用于在后台播放音乐、下载数据、执行网络操作等。服务的特点如下:1.服务是一种后台运行的组件,可以在不与用户交互的情况下执行长时间运行的操作。2.服务可以在应用程序的......
  • 拓端荣获腾讯云开发者社区“2022年度优秀作者”称号
    全文链接:http://tecdat.cn/?p=32574原文出处:拓端数据部落公众号近日,拓端获得了腾讯云开发者社区的“2022年度优秀作者”称号。 自入驻腾讯云开发者社区以来,我们共发布了980篇文章,内容涵盖数据资讯、行业动态、技术发展趋势等。同时,我们也一直在扎实生产内容,不断更新内容形式,致......
  • Flutter控件之Stack控件
    简介Flutter中的Stack控件是一种可用于将多个子控件重叠在一起的布局控件。Stack将所有子控件放在同一个位置,它们可以根据需要进行定位、缩放或旋转。Stack中的子控件可以是任何类型的控件,例如文本、图像、按钮等。主要属性Stack控件的主要属性包括:alignment:用于指定子控件的......
  • Flutter控件之Stack控件
    简介Flutter中的Stack控件是一种可用于将多个子控件重叠在一起的布局控件。Stack将所有子控件放在同一个位置,它们可以根据需要进行定位、缩放或旋转。Stack中的子控件可以是任何类型的控件,例如文本、图像、按钮等。主要属性Stack控件的主要属性包括:alignment:用于指定子控件的......
  • 去除Flutter项目dart文件在vscode里出现波浪号
    问题示例: 去掉Flutter项目在vscode里打开显示的蓝色波浪线解决办法: ......
  • YOLOv8目标检测实战:Android手机部署 (视频课程)
    课程链接:https://edu.51cto.com/course/33890.htmlYOLOv8目标检测基于先前YOLO版本的成功,引入了新功能和改进,进一步提升了性能和灵活性。本课程在Windows上手把手演示YOLOv8(YOLOv8n和YOLOv8s)目标检测在Android(安卓)手机进行部署的过程。内容包括:安装软件环境、安装PyTorch,克隆和......
  • Android平台如何实现外部RTSP|RTMP流注入轻量级RTSP服务模块(内网RTSP网关)
     技术背景今天分享的是外部RTSP或RTMP流,拉取后注入到本地轻量级RTSP服务模块,供内网小并发场景下使用,这里我们叫做内网RTSP网关模块。内网RTSP网关模块,系内置轻量级RTSP服务模块扩展,完成外部RTSP/RTMP数据拉取并注入到轻量级RTSP服务模块工作,多个内网客户端直接访问内网轻量级RTSP......
  • Android平台GB28181设备接入模块如何对接NV21、YV12、RGB、YUV等外部数据
    技术背景我们在对接Android平台GB28181设备接入模块的开发者时,遇到这样的场景,除了Android设备(如执法记录仪、智能安全帽等)自带的camera或camera2前后摄像头数据外,还有些场景是需要外部编码前或编码后数据,比如对接OTG类似的外置数据源,如NV12、NV21、YV12、RGB或YUV等格式,这里做个简......
  • 前端检测手机系统是iOS还是android(可实现根据手机系统跳转App下载链接)
    快速实现前端检测手机系统是iOS还是android(可实现根据手机系统跳转App下载链接);下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=12652效果图如下:   实现代码如下:#使用方法####HTML代码部分```html<template><viewclass="conten......