flutter中的布局和响应式app方法示例
作者:前端那些年 发布时间:2023-02-19 19:14:52
flutter中的布局
flutter布局机制的核心是组件。在flutter中,几乎所有的东西都是组件,布局模型也不例外。图片,Icon, 文本等等,我们在flutter客户端中看到的所有内容都是组件。我们看不到的东西,比如:rows,columns,等等等等也都是组件。
我们将简单的组件组合在一起,构成复杂的组件。比如我们经常写的导航栏:
他的布局可能是这样的:
用树形图来表示是这样的:
图中的大部分内容应该跟我们想象中的差不了多少,可能会有些人对Containter
有些疑惑,Containter
其实是一个容器组件,我们可以用它来控制一些子组件的展示,比如我们想要添加padding,margin,border,background- color等属性时,我们就可以用它来控制,用法和div基本一样。
(使用)放置一个组件
在flutter中如何使用组件呢?很简单。
比如,我想要一个居中的效果,那么我就使用Center
组件;想要水平布局,我就使用row
组件,想要垂直效果,就使用column
组件。想要一个列表,那就listview
组件,如此而已。
比如:创建一个文本。
Text('Hello World'),
比如:创建一个图片。
Image.asset(
'images/lake.jpg',
fit: BoxFit.cover,
)
比如:创建一个图标。
Icon(
Icons.star,
color: Colors.red[500],
)
app 本身就是个组件
试想一下我们平时搭建的vue或者react项目,其实他们本身就都是一个组件而已。
从bootstrap开始,或者讲的更透彻一些,从我们执行:
let app = new vue() // let app = createapp()
app.mount('#app', true)
mount执行完成后,全局项目的大组件就已经跑起来了。
然后我们又在各个模块中创建了页面,拆分了模块...
flutter也一样,如果你仔细对比一下vue,或者react项目的入口文件和flutter项目入口文件的区别:
import 'package:flutter/material.dart';
import 'mine.dart';
import './yours.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
routes: {'/mine': (context) => Mine(), '/yours': (context) => Yours()},
);
}
}
发现了吗,其实是一样的套路,实例化了一个全局的app
,一个全局的组件。
Material apps 和 Non-Material apps
对于Material app,我们可以使用app本身自带的一些组件,比如:Scaffold提供了默认的顶部导航,底部导航,抽屉等组件,开发起来非常方便。比如:
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter layout demo',
home: Scaffold(
appBar: AppBar(
title: const Text('Flutter layout demo'),
),
body: const Center(
child: Text('Hello World'),
),
),
);
}
}
而Non-Material apps 则没有提供这些组件,我们想要实现那些东西,都需要我们自己动手去封装。比如:
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return Container(
decoration: const BoxDecoration(color: Colors.white),
child: const Center(
child: Text(
'Hello World',
textDirection: TextDirection.ltr,
style: TextStyle(
fontSize: 32,
color: Colors.black87,
),
),
),
);
}
}
自适应和响应式
flutter的一个主要目的是为我们提供一个组件库,让我们可以很快的进行开发,并且开发出来的应用可以运行在多个平台上。这意味着我们的应用程序在不同尺寸的屏幕上,手机,手表,或者显示器都有可能。
所以,我们的应用应该是响应式的,或者叫自适应。
自适应和响应式听起来很相似,但是它们是一回事儿吗?也许未必如此。
自适应和响应式其实是两个维度的东西。我们可以开发一个没有响应式的自适应程序,也可以开发一个没有自适应的响应式程序。也许有些人会很疑惑,没有响应式的自适应程序,比如我要兼容三个设备,那么我写三套代码去兼容它们,这就是非响应式的自适应程序。
当然,我们也可以开发出既是自适应,又是响应式的程序。
什么是响应式?通常情况下,自适应的应用程序的布局可以根据屏幕大小进行调整。比如用户调整了窗口大小,旋转了设备方向,那么就会重新进行布局。这一点在应用运行在不同的设备上时,显得尤为重要。
什么是自适应?应用程序在不同的设备上运行,我们需要处理鼠标,键盘输入以及触摸输入等功能,需要我们对程序的视觉效果,组件的工作方式,API在各个平台上的兼容性有一定的了解。
如此看来,响应式似乎侧重于布局,而自适应则既要考虑布局,又要兼顾功能。
flutter实现响应式的方法
使用flutter我们可以非常方便的开发出响应式或自适应的app。有两种可行的方案:
一种是利用LayoutBuilder
这个类。通过它的builder
属性,我们可以获取到BoxConstraints
对象,检查容器的约束性来决定展示什么。比如:如果我们的maxWidth
大于我们的屏幕宽度的临界点,就返回一个包含列表的Scaffold
对象。如果小于屏幕的临界点,就基别的因素进行布局。
另外一种是使用媒体查询技术MediaQuery.of()
。它可以获取我们当前应用的size
,orientation
等信息,我们可以根据获取的信息作出一些有利于我们应用展示效果的决策。
其他的可以用来创建响应式ui的组件有,比如:
AspectRatio
CustomSingleChildLayout
CustomMultiChildLayout
FittedBox
FractionallySizedBox
LayoutBuilder
MediaQuery
MediaQueryData
OrientationBuilder
这些都可以用来开发响应式的app应用。
小结
本文简单介绍一下flutter如何开发响应式app,更多关于flutter布局响应式app的资料请关注脚本之家其它相关文章!
来源:https://juejin.cn/post/7174078317539098654
猜你喜欢
- 前言我们平时在开发的时候,发起网络请求前,会需要显示一个Loading,一般的做法都是在xml布局上添加好Loading,然后在Activi
- 概要:流是一组有顺序的,有起点和终点的字节集合,是对数据传输的总称或抽象。即数据在两设备间的传输称为流,流的本质是数据传输,根据数据传输特性
- 一、背景假如:黑客黑进了数据库,或者离职人员导出了数据,那么就可能导致这些敏感数据的泄漏。因此我们就需要找到一种方法来解决这个问题。二、解决
- 环境配置:Jdk1.8 + Tomcat8.5 + mysql + Eclispe(IntelliJ IDEA,Eclispe,MyEcli
- Junit这种老技术,现在又拿出来说,不为别的,某种程度上来说,更是为了要说明它在项目中的重要性。 凭本人的感觉和经验来说,在项目中完全按标
- 从Microsoft .Net 2.0版本以后,就默认提供了System.IO.Ports.SerialPort类,用户可以非常简单地编写少
- 既然是一个网关。那么全局过滤器肯定是少不了的一个存在。像是鉴权、认证啥的不可能每个服务都做一次,一般都是在网关处就搞定了。Zuul他就有很强
- Tomcat 如何实现WebSocketWebSocket协议属于HTML5标准,越来越多浏览器已经原生支持WebSocket,它能让客户端
- 之前做 Ble 开发都是在 Android 6.0 系统以下的版本中进行测试的,今天使用 Android 6.0 的设备测试的时候,发现扫描
- 本文实例讲述了Java实现的微信公众号获取微信用户信息。分享给大家供大家参考,具体如下:注: 这里获取用户信息方式和网页授权获取
- 一、抽象类是什么?在面向对象的概念中,所有的对象都是通过类来描绘的,但是反过来,并不是所有的类都是用来描绘对象的,如果一个类中没有包含足够的
- 前提: 可以参考文章 SpringBoot 接入 SparkSpringBoot 已经接入 Spark已配置 JavaSparkContex
- 本文实例讲述了Java实现过滤掉map集合中key或value为空的值。分享给大家供大家参考,具体如下:import java.util.C
- 背景Android系统模块代码的编译实在是太耗时了,即使寥寥几行代码的修改,也能让一台具有足够性能的编译服务器工作十几分钟以上(模块单编),
- JavaWeb项目部署到服务器详细步骤本地准备在eclipse中将项目打成war文件:鼠标右键要部署到服务器上的项目导出项目数据库文件MyS
- 因为在Action的execute方法声明时就抛出了Exception异常,所以我们无需再execute方法中捕捉异常,仅需在struts.
- 今天看《第一行代码》上面关于拍照和从相册选取图片那一部分,发现始终出不来效果,所以搜索其他资料学习一下相关知识,写一个简单的Demo。&nb
- Spring Cloud Zuul 集成Swagger1.准备服务注册中心eureka-server2.创建微服务swagger-servi
- 多线程run方法中直接调用service业务类应注意Java多线程run方法里边使用service业务类会产生java.lang.NullP
- 本文实例讲述了C#通过重写Panel改变边框颜色与宽度的方法。分享给大家供大家参考。具体实现方法如下:using System;using