Flutter Paddiing 组件

在 html 中常见的布局标签都有 padding 属性,但是 Flutter 中很多 Widget 是没有 padding 属 性。这个时候我们可以用 Padding 组件处理容器与子元素直接的间距。

属性

说明

padding

padding 值, EdgeInsetss 设置填充的值

child

子组件

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('FlutterDemo')),
body: LayoutDemo(),
));
}
} class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.fromLTRB(0, 0, 10, 0),
child: GridView.count(
crossAxisCount: 2,
childAspectRatio: 1.7,
children: <Widget>[
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network('http://pic31.nipic.com/20130801/11604791_100539834000_2.jpg',
fit: BoxFit.cover),
),
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network('http://pic31.nipic.com/20130801/11604791_100539834000_2.jpg',
fit: BoxFit.cover),
),
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network('http://pic31.nipic.com/20130801/11604791_100539834000_2.jpg',
fit: BoxFit.cover),
),
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network('http://pic31.nipic.com/20130801/11604791_100539834000_2.jpg',
fit: BoxFit.cover),
),
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network('http://pic31.nipic.com/20130801/11604791_100539834000_2.jpg',
fit: BoxFit.cover),
),
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network('http://pic31.nipic.com/20130801/11604791_100539834000_2.jpg',
fit: BoxFit.cover),
),
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network('http://pic31.nipic.com/20130801/11604791_100539834000_2.jpg',
fit: BoxFit.cover),
),
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network('http://pic31.nipic.com/20130801/11604791_100539834000_2.jpg',
fit: BoxFit.cover),
),
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network('http://pic31.nipic.com/20130801/11604791_100539834000_2.jpg',
fit: BoxFit.cover),
),
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network('http://pic31.nipic.com/20130801/11604791_100539834000_2.jpg',
fit: BoxFit.cover),
),
],
));
}
}

Flutter Row 水平布局组件

属性

说明

mainAxisAlignment

主轴的排序方式

crossAxisAlignment

次轴的排序方式

children

组件子元素

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('FlutterDemo')),
body: LayoutDemo(),
));
}
} class LayoutDemo 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.search,color: Colors.blue),
IconContainer(Icons.home,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)
),
);
}
}

Flutter Column 垂直布局组件

属性

说明

mainAxisAlignment

主轴的排序方式

crossAxisAlignment

次轴的排序方式

children

组件子元素

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('FlutterDemo')),
body: LayoutDemo(),
));
}
} class LayoutDemo 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.end,
children: <Widget>[
IconContainer(Icons.search,color: Colors.blue),
IconContainer(Icons.home,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)
),
);
}
}

Flutter Expanded 类似 Web 中的 Flex 布局

Expanded 可以用在 Row 和 Column 布局中

属性

说明

flex

元素站整个父 Row /Column 的比例

child

子元素

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('FlutterDemo')),
body: LayoutDemo(),
));
}
} class LayoutDemo 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),
), ],
);
}
} 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';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('FlutterDemo')),
body: LayoutDemo(),
));
}
} class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row( children: <Widget>[
Expanded(
flex: 1,
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)
),
);
}
}
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('FlutterDemo')),
body: LayoutDemo(),
));
}
} class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[ Row(
children: <Widget>[
Expanded(
child: Container(
height: 180,
color: Colors.yellow,
child: Text('你好Flutter'),
),
)
],
),
SizedBox(height: 10),
Row(
children: <Widget>[
Expanded(
flex: 2,
child: Container(
height: 180,
child: Image.network("http://pic31.nipic.com/20130801/11604791_100539834000_2.jpg",fit: BoxFit.cover),
)
),
SizedBox(width: 10),
Expanded(
flex: 1,
child: Container(
height: 180,
child: ListView(
children: <Widget>[
Container(
height: 85,
child: Image.network("http://pic31.nipic.com/20130801/11604791_100539834000_2.jpg",fit: BoxFit.cover), ),
SizedBox(height: 10),
Container(
height: 85,
child: Image.network("http://pic31.nipic.com/20130801/11604791_100539834000_2.jpg",fit: BoxFit.cover),
)
],
)
)
), ],
)
],
);
}
}

flutter 页面布局 Paddiing Row Column Expanded 组件的更多相关文章

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

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

  2. 10Flutter页面布局 Padding Row Column Expanded组件详解:

    Padding组件: main.dart import 'package:flutter/material.dart'; import 'res/listData.dart'; /* flutter页 ...

  3. flutter页面布局一

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

  4. Flutter 页面布局 Stack层叠组件

    Stack 表示堆的意思,我们可以用 Stack 或者 Stack 结合 Align 或者 Stack 结合 Positiond 来实现页面的定位布局 属性 说明 alignment 配置所有子元素的 ...

  5. flutter页面布局三

    RaisedButton 为了实现今天的效果,在认识Wrap组件之前,先认识一下flutter中的按钮组件,Flutter 中通过 RaisedButton 定义一个按钮. import 'packa ...

  6. 12Flutter页面布局 AspectRatio和Cart卡片组件

    /* Flutter AspectRatio.Cart卡片组件: AspectRatio的作用是根据设置调整子元素child的宽高比. AspectRatio首先会在布局限制条件允许的范围内尽可能的扩 ...

  7. flutter页面布局二

    Stack 在flutter中,Stack表示堆的意思,可以用来实现页面的定位布局. Stack组件接收两个可选参数: alignment:配置所有子元素的显示位置 children:子组件    在 ...

  8. 11Flutter页面布局 Stack层叠组件 Stack与Align Stack与Positioned实现定位布局

    /* Flutter 页面布局 Stack层叠组件: Stack与Align Stack与Positioned实现定位布局: Flutter Stack组件: Stack表示堆得意思,我们可以用Sta ...

  9. 13Flutter页面布局 Wrap组件

    /* Flutter页面布局Wrap组件: Wrap可以实现流布局,单行的Wrap跟Row表现几乎一致,单列的Wrap则跟Row表现几乎一致. 但Row与Column都是单行单列的.Wrap则突破了这 ...

随机推荐

  1. 小程序~获取手机号getPhoneNumber提示该appid没有权限

    处理思路 (1)小程序是不是企业主体 (2)有没有进行认证 (3)如果没有 是不可以获取用户手机号码的 .

  2. C++异常处理(一)----基本语法

    实验环境 win7 下的vs2017,基本原则:throw抛出的数据类型,和cathc语句的数据类型要一致 异常的引发和异常的处理可以分布在不同函数中,所以c++的异常是跨栈的 异常是由“地地道道“的 ...

  3. IDEA 中tomcat图片储存和访问虚拟路径(图片和程序分家)

    本文链接:https://blog.csdn.net/qq_36481052/article/details/78813213 **前段时间,遇到了图片已经储存了文件中也显示有图片,但就是死活访问不到 ...

  4. HDFS的读机制

    HDFS的读机制: 1.初始化FileSystem ,客户端调用FileSystem 中的open方法打开文件. 2.FileSystem 调用远程RPC服务,获取namenode上的文件的数据块信息 ...

  5. MongoDB 常用操作命令大全

    一.数据库常用命令1.Help查看命令提示 复制代码 代码如下: helpdb.help();db.yourColl.help();db.youColl.find().help();rs.help() ...

  6. Linux系统性能10条命令

    概述 通过执行以下命令,可以在1分钟内对系统资源使用情况有个大致的了解. uptime dmesg | tail vmstat 1 mpstat -P ALL 1 pidstat 1 iostat - ...

  7. loj #2053 莫队

    \(des\) 存在一个长度为 \(n\) 的数字 \(s\), 一个素数 \(P\) \(m\) 次询问一段区间 \([l, r]\) 内的子串构成的数是 \(P\) 的倍数 \(sol\) 对于一 ...

  8. 数据结构实验之排序三:bucket sort (SDUT 3400)

    桶排序: #include <stdio.h> #include <string.h> int a[5555555]; int main() { int n,m; scanf( ...

  9. Android中活动被回收了怎么办

    当一个活动进入到了停止状态,是有可能被系统回收的.按下返回键的时候,活动被重新创建一次,但是里面的数据就没办法重现: 这时Activity中提供了一个onSaveInstanceState()回调方法 ...

  10. docker技术入门(2)

    接上一篇文章 [容器技术]Docker容器技术入门(一) 今天接着上次聊一聊有关Docker网络.数据存储相关的技术点 Docker网络模式 01 Dokcer 通过使用 Linux 桥接提供容器之间 ...