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),
),
);
}
}
Expanded
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组件详解:的更多相关文章

  1. 页面布局 Paddiing Row Column Expanded 组件详解

    一.Paddiing 组件     padding    EdgeInsetss 设置填充的值     child  组件    return Padding(     padding: EdgeIn ...

  2. flutter 页面布局 Paddiing Row Column Expanded 组件

    Flutter Paddiing 组件 在 html 中常见的布局标签都有 padding 属性,但是 Flutter 中很多 Widget 是没有 padding 属 性.这个时候我们可以用 Pad ...

  3. Tomcat负载均衡、调优核心应用进阶学习笔记(一):tomcat文件目录、页面、架构组件详解、tomcat运行方式、组件介绍、tomcat管理

    文章目录 tomcat文件目录 bin conf lib logs temp webapps work 页面 架构组件详解 tomcat运行方式 组件介绍 tomcat管理 tomcat文件目录 ➜ ...

  4. Echars 6大公共组件详解

    Echars 六大组件详解 : title  tooltip toolbox legend  dataZoom visualMap 一.title标题详解 myTitleStyle = { color ...

  5. Angular6 学习笔记——组件详解之组件通讯

    angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net ...

  6. Angular6 学习笔记——组件详解之模板语法

    angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net ...

  7. Tomcat系列之服务器的安装与配置以及各组件详解

    Tomcat系列之服务器的安装与配置以及各组件详解 大纲 一.前言 二.安装与配置Tomcat 三.Tomcat 目录的结构 四.Tomcat 配置文件 注,本文的测试的操作系统为CentOS 6.4 ...

  8. Android中Intent组件详解

    Intent是不同组件之间相互通讯的纽带,封装了不同组件之间通讯的条件.Intent本身是定义为一个类别(Class),一个Intent对象表达一个目的(Goal)或期望(Expectation),叙 ...

  9. Android笔记——四大组件详解与总结

     android四大组件分别为activity.service.content provider.broadcast receiver. ------------------------------- ...

随机推荐

  1. 网络流dinic ek模板 poj1273

    这里只是用来存放模板,几乎没有讲解,要看讲解网上应该很多吧…… ek bfs不停寻找增广路到找不到为止,找到终点时用pre回溯,O(VE^2) #include<cstdio> #incl ...

  2. Neutron服务组件

    OpenStack 项目中的Neutron 网络服务组件中提供虚拟机实例对网络的连接,其中plug-ins 能够提供对多种网络设备和软件的支持,使OpenStack 环境的构建和部署具备更多的灵活性, ...

  3. PropTypes没有定义的问题

    今天做项目遇到了一个坑 import React, { Component,PropTypes} from 'react'; console.log(PropTypes); //undefined 用 ...

  4. [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 ...

  5. 凌乱的yyy / 线段覆盖(贪心)

    https://www.luogu.org/problemnew/show/P1803  题目链接 贪心,选择结束时间为关键字排序,相同时开始时间大的在前,然后for一遍比较就好了 #include& ...

  6. hive动态分区常用参数

    set mapreduce.job.queuename=root.sc;set hive.exec.dynamic.partition=true;set hive.exec.dynamic.parti ...

  7. 通过Java调用Python脚本

    在进行开发的过程中,偶尔会遇到需要使用Java调用Python脚本的时候,毕竟Python在诸如爬虫,以及科学计算等方面具有天然的优势.最近在工作中遇到需要在Java程序中调用已经写好的Python程 ...

  8. virtualBox+centOS的一些报错

    step1: 安装系统后进入命令行模式 安装virtualBox:https://www.virtualbox.org/wiki/Downloads 下载centOS7镜像:https://www.c ...

  9. IdentityServer(三)密码模式

    前言 用户名密码模式相较于客户端凭证模式,多了用户.通过用户的用户名和密码向Identity Server申请访问令牌.密码模式有两种实现方式. 1.把用户写进内存Identity从中读取账号密码验证 ...

  10. js查找

    //对象克隆 function main_clone(fromObject, toObject) { var copy = toObject || {}; for (var i in fromObje ...