Padding组件
Padding组件.pngimport 'package:flutter/material.dart';
main() {
runApp(MyApp());
}
class HomeContent extends StatelessWidget {
List<Widget> _getListData() {
List<Widget> list = new List();
for (var i = 0; i < 20; i++) {
list.add(Container(
alignment: Alignment.center,
child: Padding(
padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
child: Text(
'这是第$i条数据',
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
color: Colors.blue,
// height: 400, //设置高度没有反应
));
}
return list;
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return GridView.count(
//水平组件 间距
crossAxisSpacing: 20.0,
// 垂直组件 间距
mainAxisSpacing: 50.0,
//宽高比例 间接调整宽高
childAspectRatio: 0.7,
// 上下左右距离
// 使用Padding组件设置间距
// padding: EdgeInsets.all(30),
//列数
crossAxisCount: 6,
children: this._getListData(),
);
}
}
//MaterialApp组件作为根组件使用
// Scaffold 有下面几个主要属性
// appBar-界面顶部导航栏 body-界面显示的主要内容Widget drawer-抽屉菜单控件
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('导航栏'),
),
body: HomeContent(),
),
);
}
}
EdgeInsets.fromLTRB(this.left, this.top, this.right, this.bottom)
Row水平布局组件
Row水平布局组件属性import 'package:flutter/material.dart';
main() {
runApp(MyApp());
}
class HomeContent extends StatelessWidget {
List<Widget> _getListData() {
List<Widget> list = new List();
for (var i = 0; i < 20; i++) {
list.add(Container(
alignment: Alignment.center,
child: Padding(
padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
child: Text(
'这是第$i条数据',
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
color: Colors.blue,
// height: 400, //设置高度没有反应
));
}
return list;
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
height: 200,
width: 500,
color: Colors.red,
child: Row(
//主轴的排序方向
mainAxisAlignment: MainAxisAlignment.center,
//Y轴方向
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
IconContainer(
Icons.home,
color: Colors.yellow,
size: 40,
),
IconContainer(
Icons.search,
color: Colors.green,
size: 40,
),
IconContainer(
Icons.ac_unit,
color: Colors.pink,
size: 40,
),
],
));
}
}
class IconContainer extends StatelessWidget {
Color color = Colors.red;
double size = 32.0;
IconData icon;
IconContainer(this.icon, {this.size, this.color});
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
width: 100.0,
height: 100.0,
color: this.color,
child: Center(
child: Icon(
this.icon,
size: this.size,
color: Colors.blue,
),
));
}
}
//MaterialApp组件作为根组件使用
// Scaffold 有下面几个主要属性
// appBar-界面顶部导航栏 body-界面显示的主要内容Widget drawer-抽屉菜单控件
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('导航栏'),
),
body: HomeContent(),
),
);
}
}
Column垂直布局组件
Column垂直布局组件属性MainAxisSize:在主轴方向占有空间的值,取值有两种,默认是max
- max:根据传入的布局约束条件,最大化主轴方向的可用空间;
- min:与max相反,是最小化主轴方向的可用空间;
mainAxisAlignment:主轴布局方式,也就是垂直的方向
- 默认值:MainAxisAlignment.start:
- start ,沿着主轴方向(垂直方向)顶部对齐;
- end,沿着主轴方向(垂直方向)底部对齐;
- center,沿着主轴方向(垂直方向)居中对齐;
- spaceBetween ,沿着主轴方向(垂直方向)平分剩余空间;
- spaceAround,把剩余空间平分成n份,n是子widget的数量,然后把其中一份空间分成2份,放在第一个child的前面,和最后一个child的后面;
- spaceEvenly,把剩余空间平分n+1份,然后平分所有的空间,请注意和spaceAround的区别;
import 'package:flutter/material.dart';
main() {
runApp(MyApp());
}
class HomeContent extends StatelessWidget {
List<Widget> _getListData() {
List<Widget> list = new List();
for (var i = 0; i < 20; i++) {
list.add(Container(
alignment: Alignment.center,
child: Padding(
padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
child: Text(
'这是第$i条数据',
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
color: Colors.blue,
// height: 400, //设置高度没有反应
));
}
return list;
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
height: 500,
width: 500,
color: Colors.red,
child: Column(
//主轴的排序方向
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
//Y轴方向
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
IconContainer(
Icons.home,
color: Colors.yellow,
size: 40,
),
IconContainer(
Icons.search,
color: Colors.green,
size: 40,
),
IconContainer(
Icons.ac_unit,
color: Colors.pink,
size: 40,
),
],
));
}
}
class IconContainer extends StatelessWidget {
Color color = Colors.red;
double size = 32.0;
IconData icon;
IconContainer(this.icon, {this.size, this.color});
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
width: 100.0,
height: 100.0,
color: this.color,
child: Center(
child: Icon(
this.icon,
size: this.size,
color: Colors.blue,
),
));
}
}
//MaterialApp组件作为根组件使用
// Scaffold 有下面几个主要属性
// appBar-界面顶部导航栏 body-界面显示的主要内容Widget drawer-抽屉菜单控件
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('导航栏'),
),
body: HomeContent(),
),
);
}
}
例子
Expanded组件类似Web中的Flex布局
属性import 'package:flutter/material.dart';
main() {
runApp(MyApp());
}
class HomeContent extends StatelessWidget {
List<Widget> _getListData() {
List<Widget> list = new List();
for (var i = 0; i < 20; i++) {
list.add(Container(
alignment: Alignment.center,
child: Padding(
padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
child: Text(
'这是第$i条数据',
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
color: Colors.blue,
// height: 400, //设置高度没有反应
));
}
return list;
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
height: 500,
width: 500,
color: Colors.red,
child: Row(
children: <Widget>[
Expanded(
flex: 1,
child: IconContainer(
Icons.home,
color: Colors.yellow,
size: 40,
),
),
Expanded(
flex: 2,
child: IconContainer(
Icons.home,
color: Colors.pink,
size: 40,
),
),
//右侧固定
IconContainer(
Icons.search,
color: Colors.green,
size: 40,
),
IconContainer(
Icons.ac_unit,
color: Colors.pink,
size: 40,
),
],
));
}
}
class IconContainer extends StatelessWidget {
Color color = Colors.red;
double size = 32.0;
IconData icon;
IconContainer(this.icon, {this.size, this.color});
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
width: 100.0,
height: 100.0,
color: this.color,
child: Center(
child: Icon(
this.icon,
size: this.size,
color: Colors.blue,
),
));
}
}
//MaterialApp组件作为根组件使用
// Scaffold 有下面几个主要属性
// appBar-界面顶部导航栏 body-界面显示的主要内容Widget drawer-抽屉菜单控件
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('导航栏'),
),
body: HomeContent(),
),
);
}
}
网友评论