一、水平布局
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context)
{
return MaterialApp(
title: 'Row Widget',
home: Scaffold(
appBar: new AppBar(
title: new Text('垂直方向布局'),
),
body: new Column(
children: <Widget>[
Expanded(
child:new RaisedButton(
onPressed: (){},//这个是如果按了按钮会进行的操作,我们现在还没有就先不写
color: Colors.lightBlue,
child: new Text('blue button'),
)
),
Expanded(
child:new RaisedButton(
onPressed: (){},
color: Colors.pink[200],
child: new Text('pink button'),
)
),
Expanded(
child:new RaisedButton(
onPressed: (){},
color: Colors.orange,
child: new Text('orange button'),
)
),
],
),
),
);
}
}
注意我三个按钮都使用了Expanded所以他们三个才能占满整个水平方向的屏幕
二、垂直布局
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context)
{
return MaterialApp(
title: 'Column Widget',
home: Scaffold(
appBar: new AppBar(
title: new Text('垂直方向布局'),
),
body: Center(
child:new Column(
mainAxisAlignment: MainAxisAlignment.center,//主轴是相对于你的布局方向来说的,如果你是水平布局那水平轴就是主轴,如果你是垂直布局那竖直轴就是主轴
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new RaisedButton(
onPressed: (){},//这个是如果按了按钮会进行的操作,我们现在还没有就先不写
color: Colors.lightBlue,
child: new Text('blue button'),
),
new RaisedButton(
onPressed: (){},
color: Colors.pink[200],
child: new Text('pink button'),
),
new RaisedButton(
onPressed: (){},
color: Colors.grey,
child: new Text('grey button'),
)
],
),
)
),
);
}
}
有没有发现他们三个不能占满整个竖直方向的屏幕,那是因为我们没有加Expanded
自己可以试试
三、卡片布局
其实也没什么特别的就是看起来像卡片的样子
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context)
{
var card = new Card(
child: Column(
children: <Widget>[
ListTile(
leading: Icon(Icons.person_add,color: Colors.lightBlue,),
title: Text('某大学西校区学生公寓六号楼'),
subtitle: Text('roadkiller:15550313333'),
),
new Divider(),
ListTile(
leading: Icon(Icons.person_add,color: Colors.lightBlue,),
title: Text('某大学西校区学生公寓六号楼'),
subtitle: Text('路小哥:15550313333'),
),
new Divider(),
ListTile(
leading: Icon(Icons.person_add,color: Colors.lightBlue,),
title: Text('某大学西校区学生公寓六号楼'),
subtitle: Text('陈小哥:15550313333'),
),
],
),
);
return MaterialApp(
title: 'Stack Widget',
home: Scaffold(
appBar: new AppBar(
title: new Text('卡片布局'),
),
body: Center(
child: card,
)
),
);
}
}
四、层叠布局
如果我们想要在图片上面层叠放一些字或者Container,就需要采用层叠布局,Stack
注意alignment里的FractionalOffset的使用
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context)
{
var stack = new Stack(//自己写一个Stack组件,减少嵌套,避免恶心
alignment:const FractionalOffset(0.5, 0.9),//注意里边的参数是从0~1的,原点在左上角,所以这两个参数可以让容器固定在图片的正下方
children: <Widget>[
new CircleAvatar(//一个头像
backgroundImage: NetworkImage('https://i1.hdslb.com/bfs/archive/1791fb4c554b65d4bc2d25dfbe6558bceec9066f.jpg'),//这个引入图片的语法和之前不一样注意
radius: 100.0,
),
new Container(
decoration: BoxDecoration(
color: Colors.pinkAccent[200],
),
child: Text('鬼舞姬——阿卡丽'),
)
],
);
return MaterialApp(
title: 'Stack Widget',
home: Scaffold(
appBar: new AppBar(
title: new Text('层叠布局'),
),
body: Center(
child: stack,
)
),
);
}
}
我打LOL钟爱阿卡丽!
我打LOL钟爱阿卡丽!
我打LOL钟爱阿卡丽!
哦对了补充一哈还有相对定位
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context)
{
var stack = new Stack(
children: <Widget>[
new CircleAvatar(
backgroundImage: NetworkImage('https://i1.hdslb.com/bfs/archive/1791fb4c554b65d4bc2d25dfbe6558bceec9066f.jpg'),
radius: 100.0,
),
new Positioned(
top: 20.0,
left: 0.0,
child: new Container(
child: new Text('我女神'),
color: Colors.pinkAccent[100],
)
),
new Positioned(
bottom: 20.0,
right: 45.0,
child: new Container(
child: new Text('鬼舞姬——阿卡丽'),
color: Colors.pinkAccent[200],
)
)
],
);
return MaterialApp(
title: 'Stack Widget',
home: Scaffold(
appBar: new AppBar(
title: new Text('层叠布局'),
),
body: Center(
child: stack,
)
),
);
}
}
昨天刚退游,最近太忙了,好多事
考驾照(0.01 / 1)
练习某曲子钢伴(0.01 / 1)
Flutter学习
大物补考还得看习题册啊(0 / 1)
安.兰德《源泉》(0.5 / 1)
还没有骑车去周村 (0 / 1)
半程马拉松训练计划也不能懈怠
总之
加油吧