Paddiing 组件
2024-10-11 21:45:24
一、Flutter Paddiing 组件
在 html 中常见的布局标签都有 padding 属性，但是 Flutter 中很多 Widget 是没有 padding 属性。这个时候我们可以用 Padding 组件处理容器与子元素直接的间距。
| 属性 | 说明 |
| padding | padding 值, EdgeInsetss 设置填充的值 |
| child | 子组件 |
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.5,
children: <Widget>[
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network('https://www.itying.com/images/flutter/1.png',
fit: BoxFit.cover),
),
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network('https://www.itying.com/images/flutter/2.png',
fit: BoxFit.cover),
),
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network('https://www.itying.com/images/flutter/3.png',
fit: BoxFit.cover),
),
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network('https://www.itying.com/images/flutter/4.png',
fit: BoxFit.cover),
),
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network('https://www.itying.com/images/flutter/5.png',
fit: BoxFit.cover),
),
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network('https://www.itying.com/images/flutter/6.png',
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) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('FlutterDemo')),
body: LayoutDemo(), ,
));
}
}
class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
height: 700,
width: 500,
color: Colors.black26,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
// crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
IconContainer(Icons.home, color: Colors.red),
IconContainer(Icons.search, color: Colors.blue),
IconContainer(Icons.send, color: Colors.orange),
],
),
);
}
}
class IconContainer extends StatelessWidget {
double size;
IconData icon;
Color color;
IconContainer(this.icon, {this.size, this.color = Colors.blue}) {
this.size = 32.0;
}
@override Widget build(BuildContext context) {
return Container(
width: this.size+60,
height: this.size+60,
color:this.color,
child: Center(
child: Icon(this.icon,color:Colors.white,size:this.size)
)
);
}
}
最新文章
- php 搜索（查询）功能
- topcoder SRM 622 DIV2 FibonacciDiv2
- 【spring】non-compatible bean definition of same name and class
- pssh 不能执行指定用户命令
- 《JavaScript模式》读书笔记
- c#使用Microsoft Excel 12.0 object Libary导出的Excel文件office2003不能打开！！~~（分享）
- <转载>使CSS文字图片div元素居中方法之水平居中的几个方法
- 关于三星设备 Activity.onDestroy() 被调用。显示“开发者选项”
- drupal7 sql接口笔记
- 推荐几个web中常用js图表插件
- Java ClassLoader加载机制
- ssh整合开发
- Android 动画 属性动画 视图动画 补间动画 帧动画 详解 使用
- 干了这碗鸡汤：从理发店小弟到阿里P10技术大牛
- 反射中的一个问题点：利用Method执行main方法特殊的地方
- Tensorflow:DCGAN生成手写数字
- ivew定制主题 less ^3.0 时报错 .bezierEasingMixin(); Inline JavaScript is not enabled. Is it set in your options?
- 微信小程序奇奇怪怪的语法
- noip第23课作业
- Resharper简单安装及代码覆盖率的测试