1 Padding 组件
Padding 组件关键两个属性:padding 和 child,表示 child 组件与外面的 padding 距离。
下面的例子只是为了演示 Padding 组件:
import 'package:flutter/material.dart';
import 'res/listData.dart';
void main() {
runApp(new MyApp());
}
// 自定义组件
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
// Scaffold 定义导航头部和页面主要内容
home: Scaffold(
appBar: AppBar(
title: Text('flutter 标题'),
),
body: HomePage(),
),
theme: ThemeData(
primarySwatch: Colors.green,
),
);
}
}
class HomePage extends StatelessWidget {
Widget _getList(context, index) {
return Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Container(
color: Colors.orange,
child: Column(
children: <Widget>[
Image.network(listData[index]['imageUrl']),
SizedBox(height: 12),
Text(listData[index]['title'])
],
),
),
);
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Padding(
padding: EdgeInsets.fromLTRB(0, 0, 10, 0),
child: Container(
// padding: EdgeInsets.all(10),
child: GridView.builder(
// crossAxisCount: 2,
// crossAxisSpacing: 10,
// mainAxisSpacing: 10,
// childAspectRatio: 1.0,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
// crossAxisSpacing: 10,
// mainAxisSpacing: 10,
),
itemCount: listData.length,
itemBuilder: this._getList,
),
));
}
}

2 Row
import 'package:flutter/material.dart';
import 'res/listData.dart';
void main() {
runApp(new MyApp());
}
// 自定义组件
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
// Scaffold 定义导航头部和页面主要内容
home: Scaffold(
appBar: AppBar(
title: Text('flutter 标题'),
),
body: HomePage(),
),
theme: ThemeData(
primarySwatch: Colors.green,
),
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
height: 300,
color: Colors.pink,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
IconContext(Icons.home, color: Colors.red, size: 40.0),
IconContext(Icons.settings, color: Colors.indigoAccent),
IconContext(Icons.search)
],
),
);
}
}
class IconContext extends StatelessWidget {
final IconData icon;
final Color color;
final double size;
IconContext(this.icon, {this.color, this.size});
@override
Widget build(BuildContext context) {
return Container(
width: 100,
height: 100,
color: this.color ?? Colors.green,
child: Center(
child: Icon(
this.icon,
size: this.size ?? 30.0,
color: Colors.white,
),
),
);
}
}

3 Column
import 'package:flutter/material.dart';
import 'res/listData.dart';
void main() {
runApp(new MyApp());
}
// 自定义组件
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
// Scaffold 定义导航头部和页面主要内容
home: Scaffold(
appBar: AppBar(
title: Text('flutter 标题'),
),
body: HomePage(),
),
theme: ThemeData(
primarySwatch: Colors.green,
),
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
height: 500,
width: 400,
color: Colors.pink,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
IconContext(Icons.home, color: Colors.red, size: 40.0),
IconContext(Icons.settings, color: Colors.indigoAccent),
IconContext(Icons.search)
],
),
);
}
}
class IconContext extends StatelessWidget {
final IconData icon;
final Color color;
final double size;
IconContext(this.icon, {this.color, this.size});
@override
Widget build(BuildContext context) {
return Container(
width: 100,
height: 100,
color: this.color ?? Colors.green,
child: Center(
child: Icon(
this.icon,
size: this.size ?? 30.0,
color: Colors.white,
),
),
);
}
}

4 Expanded
import 'package:flutter/material.dart';
import 'res/listData.dart';
void main() {
runApp(new MyApp());
}
// 自定义组件
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
// Scaffold 定义导航头部和页面主要内容
home: Scaffold(
appBar: AppBar(
title: Text('flutter 标题'),
),
body: HomePage(),
),
theme: ThemeData(
primarySwatch: Colors.green,
),
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
height: 500,
width: 400,
color: Colors.pink,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[ // 所有的元素都指定 flex,则下面组件宽高无效
Expanded(
flex: 1,
child: IconContext(Icons.home, color: Colors.red, size: 40.0),
),
Expanded(
flex: 2,
child: IconContext(Icons.settings, color: Colors.indigoAccent),
),
Expanded(
flex: 1,
child: IconContext(Icons.search),
),
],
),
);
}
}
class IconContext extends StatelessWidget {
final IconData icon;
final Color color;
final double size;
IconContext(this.icon, {this.color, this.size});
@override
Widget build(BuildContext context) {
return Container(
width: 100,
height: 100,
color: this.color ?? Colors.green,
child: Center(
child: Icon(
this.icon,
size: this.size ?? 30.0,
color: Colors.white,
),
),
);
}
}

指定宽度:
import 'package:flutter/material.dart';
import 'res/listData.dart';
void main() {
runApp(new MyApp());
}
// 自定义组件
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
// Scaffold 定义导航头部和页面主要内容
home: Scaffold(
appBar: AppBar(
title: Text('flutter 标题'),
),
body: HomePage(),
),
theme: ThemeData(
primarySwatch: Colors.green,
),
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
height: 500,
width: 400,
color: Colors.pink,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
IconContext(Icons.home, color: Colors.red, size: 40.0), // 组件指定的宽度 100
Expanded(
flex: 1,
child: IconContext(Icons.settings, color: Colors.indigoAccent),
),
],
),
);
}
}
class IconContext extends StatelessWidget {
final IconData icon;
final Color color;
final double size;
IconContext(this.icon, {this.color, this.size});
@override
Widget build(BuildContext context) {
return Container(
width: 100,
height: 100,
color: this.color ?? Colors.green,
child: Center(
child: Icon(
this.icon,
size: this.size ?? 30.0,
color: Colors.white,
),
),
);
}
}

5 综合实例
import 'package:flutter/material.dart';
import 'res/listData.dart';
void main() {
runApp(new MyApp());
}
// 自定义组件
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
// Scaffold 定义导航头部和页面主要内容
home: Scaffold(
appBar: AppBar(
title: Text('flutter 标题'),
),
body: HomePage(),
),
theme: ThemeData(
primarySwatch: Colors.green,
),
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
height: 500,
width: 400,
color: Colors.pink,
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
flex: 1,
child: Container(
height: 200,
color: Colors.blue,
child: Text('11'),
),
)
],
),
SizedBox(height: 10),
Row(
children: <Widget>[
Expanded(
flex: 2,
child: Container(
height: 200,
color: Colors.green,
child: Text('222'),
),
),
SizedBox(width: 10),
Expanded(
flex: 1,
child: Column(children: <Widget>[
Row(children: <Widget>[
Expanded(
flex: 1,
child: Container(
height: 95,
color: Colors.orange,
child: Text('333'),
),
),
]),
SizedBox(height: 10),
Row(children: <Widget>[
Expanded(
flex: 1,
child: Container(
height: 95,
color: Colors.orange,
child: Text('444'),
),
),
]),
]),
),
],
)
],
),
);
}
}
class IconContext extends StatelessWidget {
final IconData icon;
final Color color;
final double size;
IconContext(this.icon, {this.color, this.size});
@override
Widget build(BuildContext context) {
return Container(
width: 100,
height: 100,
color: this.color ?? Colors.green,
child: Center(
child: Icon(
this.icon,
size: this.size ?? 30.0,
color: Colors.white,
),
),
);
}
}

网友评论