应用程序框架：
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
home: new Scaffold(
appBar: new AppBar(
title: new Text('Flutter Demo'),
),
body: new Center(
child: new TapboxA(),
),
),
);
}
}
Center：
child
Row/Column：
mainAxisAlignment：MainAxisAlignment.spaceEvenly、MainAxisSize.min（子控件零距离聚集）
crossAxisAlignment：CrossAxisAlignment.center、CrossAxisAlignment.start
children
Expanded：
flex: 表示所占权重，默认为1
child
Container：
child
padding：EdgeInsets.all(20.0)表示四个方向都有内边距，EdgeInsets.fromLTRB(20.0, 30.0, 20.0, 20.0)分别指定四个方向的内边距
margins：同上
width
height
decoration:BoxDecoration(
color: Colors.black26,
border: new Border.all(width: 10.0, color: Colors.black38),
borderRadius:const BorderRadius.all(const Radius.circular(8.0)),
)
Text：
'文本内容'
style:new TextStyle(
color: Colors.black,
fontWeight: FontWeight.w800,
fontFamily: 'Roboto',
letterSpacing: 0.5,
fontSize: 20.0,
)
Icon:
Icon(Icons.star, color: Colors.black)
Image:
Image.asset('images/pic1.jpg',fit: BoxFit.fill,)
Image.network
一些最常用的布局widget:
以下widget分为两类：widgets library中的标准widget和Material Components library中的专用widget 。 任何应用程序都可以使用widgets library中的widget，但只有Material应用程序可以使用Material Components库。
标准 widgets
Container
添加 padding, margins, borders, background color, 或将其他装饰添加到widget.
GridView
将 widgets 排列为可滚动的网格.
ListView
将widget排列为可滚动列表
Stack
将widget重叠在另一个widget之上.
Material Components
Card
将相关内容放到带圆角和投影的盒子中。
ListTile
将最多3行文字，以及可选的行前和和行尾的图标排成一行
示例代码片段：
Container
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
var container = new Container(
decoration: new BoxDecoration(
color: Colors.black26,
),
child: new Column(
children: [
new Row(
children: [
new Expanded(
child: new Container(
decoration: new BoxDecoration(
border: new Border.all(width: 10.0, color: Colors.black38),
borderRadius:
const BorderRadius.all(const Radius.circular(8.0)),
),
margin: const EdgeInsets.all(4.0),
child: new Image.asset('images/pic1.jpg'),
),
),
new Expanded(
child: new Container(
decoration: new BoxDecoration(
border: new Border.all(width: 10.0, color: Colors.black38),
borderRadius:
const BorderRadius.all(const Radius.circular(8.0)),
),
margin: const EdgeInsets.all(4.0),
child: new Image.asset('images/pic2.jpg'),
),
),
],
),
// ...
// See the definition for the second row on GitHub:
// https://raw.githubusercontent.com/flutter/website/master/_includes/code/layout/container/main.dart
],
),
);
//...
}
}
GridView
// The images are saved with names pic1.jpg, pic2.jpg...pic30.jpg.
// The List.generate constructor allows an easy way to create
// a list when objects have a predictable naming pattern.
List<Container> _buildGridTileList(int count) {
return new List<Container>.generate(
count,
(int index) =>
new Container(child: new Image.asset('images/pic${index+1}.jpg')));
}
Widget buildGrid() {
return new GridView.extent(
maxCrossAxisExtent: 150.0,
padding: const EdgeInsets.all(4.0),
mainAxisSpacing: 4.0,
crossAxisSpacing: 4.0,
children: _buildGridTileList(30));
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: buildGrid(),
),
);
}
}
ListView
List<Widget> list = <Widget>[
new ListTile(
title: new Text('CineArts at the Empire',
style: new TextStyle(fontWeight: FontWeight.w500, fontSize: 20.0)),
subtitle: new Text('85 W Portal Ave'),
leading: new Icon(
Icons.theaters,
color: Colors.blue[500],
),
),
new ListTile(
title: new Text('The Castro Theater',
style: new TextStyle(fontWeight: FontWeight.w500, fontSize: 20.0)),
subtitle: new Text('429 Castro St'),
leading: new Icon(
Icons.theaters,
color: Colors.blue[500],
),
),
// ...
// See the rest of the column defined on GitHub:
// https://raw.githubusercontent.com/flutter/website/master/_includes/code/layout/listview/main.dart
];
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return new Scaffold(
// ...
body: new Center(
child: new ListView(
children: list,
),
),
);
}
}
Stack
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
var stack = new Stack(
alignment: const Alignment(0.6, 0.6),
children: [
new CircleAvatar(
backgroundImage: new AssetImage('images/pic.jpg'),
radius: 100.0,
),
new Container(
decoration: new BoxDecoration(
color: Colors.black45,
),
child: new Text(
'Mia B',
style: new TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
],
);
// ...
}
}
Card
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
var card = new SizedBox(
height: 210.0,
child: new Card(
child: new Column(
children: [
new ListTile(
title: new Text('1625 Main Street',
style: new TextStyle(fontWeight: FontWeight.w500)),
subtitle: new Text('My City, CA 99984'),
leading: new Icon(
Icons.restaurant_menu,
color: Colors.blue[500],
),
),
new Divider(),
new ListTile(
title: new Text('(408) 555-1212',
style: new TextStyle(fontWeight: FontWeight.w500)),
leading: new Icon(
Icons.contact_phone,
color: Colors.blue[500],
),
),
new ListTile(
title: new Text('costa@example.com'),
leading: new Icon(
Icons.contact_mail,
color: Colors.blue[500],
),
),
],
),
),
);
//...
}
网友评论