前言
經(jīng)過(guò)前一批文章的基礎(chǔ)，控件的解析，接下來(lái)，讓我們?nèi)コ蛞怀颍^為復(fù)雜的一點(diǎn)布局的解析，和實(shí)現(xiàn)，可能比較枯燥，那我也沒(méi)有辦法??！布局就是這樣的凡人
內(nèi)容
一、如圖下面的這種布局：
布局
1.上面一張圖片，中間一個(gè)橫向布局，最下面一行文字，要是用安卓的xml寫(xiě)的話，肯定是很簡(jiǎn)單的，對(duì)于安卓的小伙伴們，但是如果用flutter，又該如何呢？
其實(shí)大家要是拆開(kāi)的話，一點(diǎn)點(diǎn)的拼接，有復(fù)雜入簡(jiǎn)化
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(
'花半開(kāi)最美，情留白最濃，懂得給生命留白，亦是一種生活的智慧。淡泊以明志，寧?kù)o以致遠(yuǎn)，懂得給心靈留白，方能在紛雜繁瑣的世界，淡看得失，寵辱不驚，去意無(wú)留；懂得給感情留白，方能持久生香，留有余地，相互欣賞，擁有默契；懂得給生活留白，攬一份詩(shī)意，留一份淡定，多一份睿智，生命方能如詩(shī)如畫(huà)。人心，遠(yuǎn)近相安，時(shí)光，濃淡相宜。有些風(fēng)景要遠(yuǎn)觀，才能美好；有些人情要淡然，才會(huì)久遠(yuǎn)，人生平淡更持久，留白方能生遠(yuǎn)，蓮養(yǎng)心中，隨遇而安，生命的最美不過(guò)是懂得的距離 靜靜的心里，都有一道最美麗的風(fēng)景。盡管世事繁雜，此心依然，情懷依然；盡管顛簸流離，腳步依然，追求依然；盡管歲月滄桑，世界依然，生命依然。守住最美風(fēng)景，成為一種風(fēng)度，寧?kù)o而致遠(yuǎn)；守住最美風(fēng)景，成為一種境界，悠然而豁達(dá)；守住最美風(fēng)景，成為一種睿智，淡定而從容。帶著前世的印記，心懷純凈，身披霞帶，踏一水清盈，今生，尋美好而來(lái)',
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.是不是感覺(jué)很熟悉的啊，很像安卓的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.到這里，稍微組合一點(diǎn)的布局示例也差不多了，大家是不是還有一些疑問(wèn)，感覺(jué)，怎么好像不見(jiàn)里面有向安卓那樣的listview和gridview的這樣的布局呢，其實(shí)肯定有的，下面就讓我們接著暢游一下，嘿嘿
（三）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)),
),
);
}
}
