10Flutter页面布局 Padding Row Column Expanded组件详解:
Padding组件:
main.dart
import 'package:flutter/material.dart';
import 'res/listData.dart';
/*
flutter页面布局Padding Row Column Expanded组件详情:
*/ void main() {
runApp(MyApp());
} class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Padding Row Column Expanded'),
),
body: HomeContent(),
),
);
}
} class HomeContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.fromLTRB(, , , ),
child: GridView.count(
crossAxisCount: ,
childAspectRatio: 1.7,
children: <Widget>[
Padding(
padding: EdgeInsets.fromLTRB(, , , ),
child: Image.network("https://www.itying.com/images/flutter/1.png",
fit: BoxFit.cover),
),
Padding(
padding: EdgeInsets.fromLTRB(, , , ),
child: Image.network("https://www.itying.com/images/flutter/1.png",
fit: BoxFit.cover),
),
Padding(
padding: EdgeInsets.fromLTRB(, , , ),
child: Image.network("https://www.itying.com/images/flutter/1.png",
fit: BoxFit.cover),
),
Padding(
padding: EdgeInsets.fromLTRB(, , , ),
child: Image.network("https://www.itying.com/images/flutter/1.png",
fit: BoxFit.cover),
),
Padding(
padding: EdgeInsets.fromLTRB(, , , ),
child: Image.network("https://www.itying.com/images/flutter/1.png",
fit: BoxFit.cover),
)
],
),
);
}
}
Row水平布局组件:
import 'package:flutter/material.dart';
import 'res/listData.dart';
/*
flutter页面布局Padding Row Column Expanded组件详情:
Row水平布局组件:
mainAxisAlignment 主轴的排序方式
crossAxisAlignment 次轴的排序方式
children 组件子元素:
*/ void main() {
runApp(MyApp());
} class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Padding Row Column Expanded'),
),
body: HomeContent(),
),
);
}
} class HomeContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
height: 800.0,
width: 400.0,
color: Colors.pink,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
IconContainer(Icons.home, color: Colors.blue),
IconContainer(Icons.search, color: Colors.orange),
IconContainer(Icons.select_all, color: Colors.red)
],
),
);
}
} class IconContainer extends StatelessWidget {
double size = 32.0;
Color color = Colors.red;
IconData icon;
IconContainer(this.icon, {this.color, this.size}) {}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
height: 100.0,
width: 100.0,
color: this.color,
child: Center(
child: Icon(this.icon, size: this.size, color: Colors.white),
),
);
}
}
Column 垂直布局:
import 'package:flutter/material.dart';
import 'res/listData.dart';
/*
flutter页面布局Padding Row Column Expanded组件详情:
Column水平布局组件:
mainAxisAlignment 主轴的排序方式
crossAxisAlignment 次轴的排序方式
children 组件子元素:
*/ void main() {
runApp(MyApp());
} class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Padding Row Column Expanded'),
),
body: HomeContent(),
),
);
}
} class HomeContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
height: 800.0,
width: 400.0,
color: Colors.pink,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
IconContainer(Icons.home, color: Colors.blue),
IconContainer(Icons.search, color: Colors.orange),
IconContainer(Icons.select_all, color: Colors.red)
],
),
);
}
} class IconContainer extends StatelessWidget {
double size = 32.0;
Color color = Colors.red;
IconData icon;
IconContainer(this.icon, {this.color, this.size}) {}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
height: 100.0,
width: 100.0,
color: this.color,
child: Center(
child: Icon(this.icon, size: this.size, color: Colors.white),
),
);
}
}

import 'package:flutter/material.dart';
import 'res/listData.dart';
/*
Flutter Expanded类似Web中的Flex布局:
flex:元素占整个父Row/Column的比例:
child 子元素 */ void main() {
runApp(MyApp());
} class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Padding Row Column Expanded'),
),
body: HomeContent(),
),
);
}
} class HomeContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
children: <Widget>[
// Expanded(
// flex: 1,
// child: IconContainer(Icons.search,color:Colors.blue),
// ),
// Expanded(
// flex: 2,
// child: IconContainer(Icons.home,color:Colors.orange),
// ),
// Expanded(
// flex: 1,
// child: IconContainer(Icons.select_all,color:Colors.red),
// ) Expanded(
flex: ,
child: IconContainer(Icons.home,color:Colors.orange),
),
IconContainer(Icons.search,color:Colors.blue)
],
);
}
} class IconContainer extends StatelessWidget {
double size = 32.0;
Color color = Colors.red;
IconData icon;
IconContainer(this.icon, {this.color, this.size}) {}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
height: 100.0,
width: 100.0,
color: this.color,
child: Center(
child: Icon(this.icon, size: this.size, color: Colors.white),
),
);
}
}
10Flutter页面布局 Padding Row Column Expanded组件详解:的更多相关文章
- 页面布局 Paddiing Row Column Expanded 组件详解
一.Paddiing 组件 padding EdgeInsetss 设置填充的值 child 组件 return Padding( padding: EdgeIn ...
- flutter 页面布局 Paddiing Row Column Expanded 组件
Flutter Paddiing 组件 在 html 中常见的布局标签都有 padding 属性,但是 Flutter 中很多 Widget 是没有 padding 属 性.这个时候我们可以用 Pad ...
- Tomcat负载均衡、调优核心应用进阶学习笔记(一):tomcat文件目录、页面、架构组件详解、tomcat运行方式、组件介绍、tomcat管理
文章目录 tomcat文件目录 bin conf lib logs temp webapps work 页面 架构组件详解 tomcat运行方式 组件介绍 tomcat管理 tomcat文件目录 ➜ ...
- Echars 6大公共组件详解
Echars 六大组件详解 : title tooltip toolbox legend dataZoom visualMap 一.title标题详解 myTitleStyle = { color ...
- Angular6 学习笔记——组件详解之组件通讯
angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net ...
- Angular6 学习笔记——组件详解之模板语法
angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net ...
- Tomcat系列之服务器的安装与配置以及各组件详解
Tomcat系列之服务器的安装与配置以及各组件详解 大纲 一.前言 二.安装与配置Tomcat 三.Tomcat 目录的结构 四.Tomcat 配置文件 注,本文的测试的操作系统为CentOS 6.4 ...
- Android中Intent组件详解
Intent是不同组件之间相互通讯的纽带,封装了不同组件之间通讯的条件.Intent本身是定义为一个类别(Class),一个Intent对象表达一个目的(Goal)或期望(Expectation),叙 ...
- Android笔记——四大组件详解与总结
android四大组件分别为activity.service.content provider.broadcast receiver. ------------------------------- ...
随机推荐
- 网络流dinic ek模板 poj1273
这里只是用来存放模板,几乎没有讲解,要看讲解网上应该很多吧…… ek bfs不停寻找增广路到找不到为止,找到终点时用pre回溯,O(VE^2) #include<cstdio> #incl ...
- Neutron服务组件
OpenStack 项目中的Neutron 网络服务组件中提供虚拟机实例对网络的连接,其中plug-ins 能够提供对多种网络设备和软件的支持,使OpenStack 环境的构建和部署具备更多的灵活性, ...
- PropTypes没有定义的问题
今天做项目遇到了一个坑 import React, { Component,PropTypes} from 'react'; console.log(PropTypes); //undefined 用 ...
- [USACO07MAR]面对正确的方式Face The Right Way
题目概括 题目描述 Farmer John has arranged his N (1 ≤ N ≤ 5,000) cows in a row and many of them are facing f ...
- 凌乱的yyy / 线段覆盖(贪心)
https://www.luogu.org/problemnew/show/P1803 题目链接 贪心,选择结束时间为关键字排序,相同时开始时间大的在前,然后for一遍比较就好了 #include& ...
- hive动态分区常用参数
set mapreduce.job.queuename=root.sc;set hive.exec.dynamic.partition=true;set hive.exec.dynamic.parti ...
- 通过Java调用Python脚本
在进行开发的过程中,偶尔会遇到需要使用Java调用Python脚本的时候,毕竟Python在诸如爬虫,以及科学计算等方面具有天然的优势.最近在工作中遇到需要在Java程序中调用已经写好的Python程 ...
- virtualBox+centOS的一些报错
step1: 安装系统后进入命令行模式 安装virtualBox:https://www.virtualbox.org/wiki/Downloads 下载centOS7镜像:https://www.c ...
- IdentityServer(三)密码模式
前言 用户名密码模式相较于客户端凭证模式,多了用户.通过用户的用户名和密码向Identity Server申请访问令牌.密码模式有两种实现方式. 1.把用户写进内存Identity从中读取账号密码验证 ...
- js查找
//对象克隆 function main_clone(fromObject, toObject) { var copy = toObject || {}; for (var i in fromObje ...