前言
经过前一批文章的基础，控件的解析，接下来，让我们去瞅一瞅，较为复杂的一点布局的解析，和实现，可能比较枯燥，那我也没有办法啊！布局就是这样的凡人
内容
一、如图下面的这种布局：
布局
1.上面一张图片，中间一个横向布局，最下面一行文字，要是用安卓的xml写的话，肯定是很简单的，对于安卓的小伙伴们，但是如果用flutter，又该如何呢？
其实大家要是拆开的话，一点点的拼接，有复杂入简化
2.下面就是示例哦：
import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';
import 'package:flutter/src/services/asset_bundle.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
Widget titleSelect = new Container(
padding: const EdgeInsets.all(32.0),
child: new Row(
children: <Widget>[
new Expanded(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Container(
padding: const EdgeInsets.all(18.0),
child: new Text("喜欢吗？嘻嘻，哈哈，我就是这样，哈哈",
style: new TextStyle(
fontWeight: FontWeight.bold,fontSize: 14.0
)),
),
new Text(
"你是傻子吧，你猜啊，",
style: new TextStyle(color: Colors.grey[500],fontSize: 10.0),
)
],
)),
new Icon(
Icons.star,
color: Colors.red[500],
),
new Text("41",style: new TextStyle(fontSize: 20.0),)
],
),
);
Column buidbBotColumn(IconData icon, String lab) {
Color color = Theme.of(context).primaryColor;
return new Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new Icon(
icon,
color: color,
),
new Text(
lab,
style: new TextStyle(
fontSize: 12.0, fontWeight: FontWeight.w400, color: color),
)
],
);
}
Widget botSelect = new Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
buidbBotColumn(Icons.call, 'call'),
buidbBotColumn(Icons.near_me, 'route'),
buidbBotColumn(Icons.share, 'share')
],
),
);
Widget textSele = new Container(
padding: const EdgeInsets.all(32.0),
child: new Text(
'花半开最美，情留白最浓，懂得给生命留白，亦是一种生活的智慧。淡泊以明志，宁静以致远，懂得给心灵留白，方能在纷杂繁琐的世界，淡看得失，宠辱不惊，去意无留；懂得给感情留白，方能持久生香，留有余地，相互欣赏，拥有默契；懂得给生活留白，揽一份诗意，留一份淡定，多一份睿智，生命方能如诗如画。人心，远近相安，时光，浓淡相宜。有些风景要远观，才能美好；有些人情要淡然，才会久远，人生平淡更持久，留白方能生远，莲养心中，随遇而安，生命的最美不过是懂得的距离 静静的心里，都有一道最美丽的风景。尽管世事繁杂，此心依然，情怀依然；尽管颠簸流离，脚步依然，追求依然；尽管岁月沧桑，世界依然，生命依然。守住最美风景，成为一种风度，宁静而致远；守住最美风景，成为一种境界，悠然而豁达；守住最美风景，成为一种睿智，淡定而从容。带着前世的印记，心怀纯净，身披霞带，踏一水清盈，今生，寻美好而来',
softWrap: true,style: new TextStyle(fontSize: 18.0),
),
);
return MaterialApp(
title: "flutter demo",
theme: ThemeData(primarySwatch: Colors.blue),
home: new Container(
color: Colors.white,
child: new ListView(
children: <Widget>[
new Image.asset(
'images/timg.jpeg',
width: 600.0,
height: 240.0,
fit: BoxFit.cover,
),
titleSelect,
botSelect,
textSele
],
),
),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Image.asset('images/ic_launcher.png'),
Image.asset('images/ic_launcher.png'),
Image.asset('images/ic_launcher.png'),
],
),
),
);
}
}
布局
1.是不是感觉很熟悉的啊，很像安卓的LinearLayout的布局哦，下面看看代码示例
Widget build(BuildContext context) {
return MaterialApp(
title: "flutter demo",
theme: ThemeData(primarySwatch: Colors.blue),
home: new Container(
color: Colors.white,
child: new Center(
child: new Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
new Expanded(
flex: 2,
child: new Image.asset('images/timg.jpeg'),
),
new Expanded(
child: new Image.asset('images/timg.jpeg'),
),
new Expanded(
child: new Image.asset('images/timg.jpeg'),
),
]))));
}
2.到这里，稍微组合一点的布局示例也差不多了，大家是不是还有一些疑问，感觉，怎么好像不见里面有向安卓那样的listview和gridview的这样的布局呢，其实肯定有的，下面就让我们接着畅游一下，嘿嘿
（三）GridView的布局：
布局
2.示例的代码：
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "flutter demo",
theme: ThemeData(primarySwatch: Colors.blue),
home: new Container(
color: Colors.white,
child: new Center(
child: buildGrid(),
),));
}
}
List<Container> _buildGridTileList(int count) {
return new List<Container>.generate(
count,
(int index) =>
new Container(child: new Image.asset('images/ic_launcher.png')));
}
Widget buildGrid() {
return new GridView.extent(
maxCrossAxisExtent: 300.0,
padding: const EdgeInsets.all(4.0),
mainAxisSpacing: 4.0,
crossAxisSpacing: 4.0,
children: _buildGridTileList(30));
}
（四）LIstView的布局：
布局
2.示例代码：
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
Widget buildItem(BuildContext context, int index) {
return new Text("傻子啊，你就是傻子");
}
return MaterialApp(
title: "flutter demo",
theme: ThemeData(primarySwatch: Colors.blue),
home: new Container(
color: Colors.white,
child: new Center(
child: new ListView.builder(itemCount: 40, itemBuilder: buildItem)),
),
);
}
}
