Flutter Widget of the Week 使用MediaQuery根据不同的屏幕大小调整应用程序的UI布局. 您还可以使用它根据用户布局首选项进行UI调整. class _MyHomeState extends State<MyHome> {\ @override Widget build(BuildContext context) { MediaQueryData deviceData = MediaQuery.of(context); // 屏幕信息 Size screenSi…

我们平时在开发中的过程中通常都会获取屏幕或者 widget 的宽高用来做一些事情,在 Flutter 中,我们可以使用如下方法来获取屏幕或者 widget 的宽高. MediaQuery 一般情况下,我们会使用如下方式去获取 widget 的宽高: final size =MediaQuery.of(context).size; final width =size.width; final height =size.height; 复制代码 但是如果不注意,这种写法很容易报错,例如下面的写法就会…

注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 MediaQuery 通常情况下,不会直接将MediaQuery当作一个控件,而是使用MediaQuery.of获取当前设备的信息,用法如下: var data = MediaQuery.of(context); 此方式必须放在MediaQuery作用域内,否则会抛出异常,MaterialApp和WidgetsApp都引入了MediaQuery,并且随着屏…

目录 简介 MediaQuery详解 MediaQuery的属性 MediaQuery的构造函数 MediaQuery的使用 总结 简介 移动的开发中,大家可能最头疼的就是不同设备的规格了,现在设备这么多,如何才能在诸多的设备中找到合适的widget的位置来进行绘制呢? 不用怕,在flutter中为我们提供了一个叫做MediaQuery的利器,大家一起来看看吧. MediaQuery详解 MediaQuery从名字上来看,它的意思是媒体查询.它可以查询的东西就多了,可以查询当前你app的窗口信息…

一,前言: MaterialApp和Scaffold是Flutter提供的两个Widget,其中: MaterialApp是一个方便的Widget,它封装了应用程序实现Material Design所需要的一些Widget. Scaffold组件是Material Design布局结构的基本实现.此类提供了用于显示drawer.snackbar和底部sheet的API.MaterialApp 的 child 是 Scaffold Widget. 二,MaterialApp属性介绍 * 22个参数…

1.Expanded组件 占满可用空间 -----可以到达类似flex布局中  第一列占用大量空间,所以它必须包装在Expanded widget中. 写死的高度改成Expanded自动撑满屏幕如果还是不能撑满试试加上flex:1的属性 Expanded expands its child to fill the available space --Using an Expanded widget makes a child of a Row, Column, or Flex expand to…

1.命令行运行flutter run之后iOS报错:Could not install build/ios/iphones/Runner.app on XXXXX. try lunching Xcode andselecting "Project > Run" to fix the problem open ios/Runner.xworkspace....... 这个恶心的报错,我一直以为是我Xcode的问题,因为早上一直好的,代码未动.而下午什么都没做,就是Xcode升级了下…

内容: 1.列表展示 2.轮播图 3.其他 本次的内容也是在上一节的基础上进行操作 我们就搞这个story模块. 目录: story.dart  story主页面 import 'package:flutter/material.dart'; import 'story_data.dart'; import 'story_item.dart'; void main() => runApp(Story()); class Story extends StatefulWidget { @overri…

现在的手机品牌和型号越来越多,导致我们平时写布局的时候会在个不同的移动设备上显示的效果不同, 比如我们的设计稿一个View的大小是300px,如果直接写300px,可能在当前设备显示正常,但到了其他设备可能就会偏小或者偏大,这就需要我们对屏幕进行适配. 安卓原生的话有自己的适配规则,可以根据不同的尺寸建立不同的文件夹,系统会根据当前的设备尺寸取对应的大小的布局.而flutter本身并没有适配规则,而原生的又比较繁琐,这就需要我们自己去对屏幕进行适配. 点击直达github地址 如果有帮助,请给我…

首先要安装一个插件:flutter_webview_plugin dependencies: flutter_webview_plugin: ^0.2.1+2 使用方法: new MaterialApp( routes: { "/": (_) => new WebviewScaffold( url: "https://www.google.com", appBar: new AppBar( title: new Text("Widget webvie…