Flutter之EdgeInsets
EdgeInsets
我们看看EdgeInsets提供的便捷方法:
- fromLTRB(double left, double top, double right, double
bottom):分别指定四个方向的填充。 - all(double value) : 所有方向均使用相同数值的填充。
- only({left, top, right ,bottom }):可以设置具体某个方向的填充(可以同时指定多个方向)。
- symmetric({vertical, horizontal}):用于设置对称方向的填充,vertical指top和bottom,horizontal指left和right。
class PaddingTestRoute extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Padding(
//上下左右各添加16像素补白
padding: EdgeInsets.all(16.0),
child: Column(
//显式指定对齐方式为左对齐,排除对齐干扰
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
//左边添加8像素补白
padding: const EdgeInsets.only(left: 8.0),
child: Text("Hello world"),
),
Padding(
//上下各添加8像素补白
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Text("I am Jack"),
),
Padding(
// 分别指定四个方向的补白
padding: const EdgeInsets.fromLTRB(20.0,.0,20.0,20.0),
child: Text("Your friend"),
)
],
),
);
}
}
Flutter之EdgeInsets的更多相关文章
- 编写第一个Flutter App(翻译)
博客搬迁至http://blog.wangjiegulu.com RSS订阅:http://blog.wangjiegulu.com/feed.xml 以下代码 Github 地址:https://g ...
- Flutter 即学即用系列博客——07 RenderFlex overflowed 引发的思考
背景 在进行 Flutter UI 开发的时候,控制台报出了下面错误: flutter: ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY >╞════════ ...
- Flutter 即学即用系列博客——06 超实用 Widget 集锦
本篇文章我们来讲讲一些比较常用的 Widget. 大家验证的时候使用下面的代码替换 main.dart 代码,然后在 //TODO 语句返回下面常用 Widget 示例的代码. import 'pac ...
- flutter Provide 状态管理篇
Provide是Google官方推出的状态管理模式.官方地址为: https://github.com/google/flutter-provide 现在Flutter的状态管理方案很多,redux. ...
- flutter 本地存储 (shared_preferences)
Flutter本地存储 和Android.Ios类似,Flutter也支持Preferences(Shared Preferences and NSUserDefaults) .文件.和Sqlite3 ...
- flutter - 01 基础介绍以及ListView
这篇主要讲flutter最基本的操作.我们从一个实例入手,先不需要知道它里面的每一行是什么意思,我会慢慢说. main.dart import 'package:flutter/material.da ...
- 【译】使用 Flutter 实现跨平台移动端开发
作者: Mike Bluestein | 原文地址:[https://www.smashingmagazine.com/2018/06/google-flutter-mobile-developm ...
- Flutter 读写本地文件
文档 注意 安装 path_provider 插件后重启f5, 而不是等待热更新 demo import 'dart:io'; import 'dart:async'; import 'package ...
- Flutter 页面入栈和出栈
Docs demo import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp ...
- 做了2个多月的设计和编码,我梳理了Flutter动态化的方案对比及最佳实现
背景 在端上为了提升App的灵活性, 快速解决万变的业务需求,开发者们探索了多种解决方案,如PhoneGap ,React Native ,Weex等,但在Flutter生态还没有好的解决方案.未来闲 ...
随机推荐
- go-使用 vscore 调试 go 语言
{ // 使用 IntelliSense 了解相关属性. // 悬停以查看现有属性的描述. // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linki ...
- vscode中使用powershell显示分支名
https://blog.csdn.net/weixin_43932597/article/details/125000557 windows powershell(或windows terminal ...
- Panel容器中显示多个窗体并通过按钮实现窗体切换
Panel容器中显示多个窗体并通过按钮实现窗体切换 在项目开发中经常会有如下需求: 主窗体formMain中有个一Panle: 在Panel内显示多个窗体,如form1,form2--,分别通过不同按 ...
- qt 运行环境配置
注意事项: 1 在设备上进行如下配置 root@am335x-pico:/opt# export QTDIR=/opt/qt-4.6.2-arm root@am335x-pico:/opt# expo ...
- JavaScript的知识点整理
最近写了一个员工管理作业,暴露了一些问题就是. JS的查找标签的时候,要确定返回的是DOM对象还是数组,document对象可以是任意dom对象,将查询范围限制在当前dom对象, 1.直接查找标签 d ...
- Azkaban 4.0.0 系列(一)-- Solo-Server
下载 链接 https://github.com/azkaban/azkaban/releases/4.0.0.tar.gz 解压 tar -xzvf 4.0.0.tar.gz -C 自定义目标目录 ...
- 如何把腾讯地图左边的搜索结果导出成excel里?
最近,又有朋友让我再写一个 腾讯地图 采集商家的地址,电话信息. 原理应该差不多,我就查阅了下腾讯地图的采集规则,编写了专门针对腾讯地图的采集软件. 界面上和百度地图的采集软件基本类似,但是不用选择区 ...
- uniapp 图片文件流
uni.request({ url: '*****', //仅为示例,并非真实接口地址. method: 'GET', responseType: 'arraybuffer', data: {}, h ...
- MogDB 学习笔记之 -- PITR恢复
# 概念描述## 背景信息当数据库崩溃或希望回退到数据库之前的某一状态时,MogDB的即时恢复功能(Point-In-Time Recovery,简称PITR)可以支持恢复到备份归档数据之后的任意时间 ...
- ubuntu20.04系统openjdk11变更openjdk-8-jdk
ubuntu20.04系统openjdk11变更openjdk-8-jdk一.卸载openjdk11先检查是否安装,命令:dpkg --list | grep -i jdk移除openjdk包,命令: ...