1 GridView網(wǎng)格布局組件

1.1 說(shuō)明

1.1.1 圖例

1.1.2 說(shuō)明

????????GridView網(wǎng)格布局在實(shí)際項(xiàng)目中用的也是非常多的，當(dāng)我們想讓可以滾動(dòng)的元素使用矩陣方式排列的時(shí)?候。此時(shí)我們可以用網(wǎng)格列表組件GridView實(shí)現(xiàn)布局

GridView創(chuàng)建網(wǎng)格列表主要有下面三種方式

????????1、可以通過(guò)GridView.count?實(shí)現(xiàn)網(wǎng)格布局

????????2、可以通過(guò)GridView.extent?實(shí)現(xiàn)網(wǎng)格布局

????????3、通過(guò)GridView.builder實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)格布局

1.2 常用屬性

屬性

1.3 案例

1.3.1 GridView.count?實(shí)現(xiàn)網(wǎng)格布局

????????GridView.count構(gòu)造函數(shù)內(nèi)部使用了SliverGridDelegateWithFixedCrossAxisCount，我們通過(guò)它可以
????????快速的創(chuàng)建橫軸固定數(shù)量子元素的GridView

示例

//GridView.count?實(shí)現(xiàn)網(wǎng)格布局
class?HomePage?extends?StatelessWidget?{const?HomePage({Key??key})?:?super(key:?key);@overrideWidget?build(BuildContext?context)?{return?GridView.count(crossAxisCount:?3,childAspectRatio:?1.0,children:?const?<Widget>[Icon(Icons.home),Icon(Icons.ac_unit),Icon(Icons.search),Icon(Icons.settings),Icon(Icons.airport_shuttle),Icon(Icons.all_inclusive),Icon(Icons.beach_access),Icon(Icons.cake),Icon(Icons.circle),],);}
}

1.3.2 GridView.extent實(shí)現(xiàn)網(wǎng)格布局

????????GridView.extent構(gòu)造函數(shù)內(nèi)部使用了SliverGridDelegateWithMaxCrossAxisExtent，我們通過(guò)它可以?快速的創(chuàng)建橫軸子元素為固定最大長(zhǎng)度的的GridView

//GridView.extent實(shí)現(xiàn)網(wǎng)格布局
class HomePage2 extends StatelessWidget {const HomePage2({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return GridView.extent(maxCrossAxisExtent: 80.0,childAspectRatio: 1.0,children: const <Widget>[Icon(Icons.home),Icon(Icons.ac_unit),Icon(Icons.search),Icon(Icons.settings),Icon(Icons.airport_shuttle),Icon(Icons.all_inclusive),Icon(Icons.beach_access),Icon(Icons.cake),Icon(Icons.circle),],);}
}

1.3.3 GridView.count?和?GridView.extent屬性詳解

//GridView.count?和?GridView.extent屬性詳解
class?HomePage3?extends?StatelessWidget?{const?HomePage3({Key??key})?:?super(key:?key);List<Widget>?_getListData()?{List<Widget>?list?=?[];for?(var?i?=?0;?i?<?20;?i++)?{list.add(Container(alignment:?Alignment.center,color:?Colors.blue,child:?Text('這是第$i條數(shù)據(jù)',style:?const?TextStyle(color:?Colors.white,?fontSize:?20),),
//?height:?400,??//設(shè)置高度沒(méi)有反應(yīng)));}return?list;}@overrideWidget?build(BuildContext?context)?{return?GridView.count(crossAxisSpacing:?20.0,//水平子?Widget?之間間距mainAxisSpacing:?20.0,//垂直子?Widget?之間間距padding:?const?EdgeInsets.all(10),crossAxisCount:?2,//一行的?Widget?數(shù)量childAspectRatio:?0.8,//寬度和高度的比例children:?_getListData(),);}
}

1.3.4 GridView實(shí)現(xiàn)動(dòng)態(tài)列表

GridView.count實(shí)現(xiàn)動(dòng)態(tài)列表

// GridView.count 實(shí)現(xiàn)動(dòng)態(tài)列表class HomePage extends StatelessWidget {const HomePage({Key? key}) : super(key: key);List<Widget> _getListData() {var tempList = listData.map((value) {return Container(decoration: BoxDecoration(border: Border.all(color: const Color.fromRGBO(233, 233, 233, 0.9), width: 1)),child: Column(children: <Widget>[Image.asset(value['imageUrl']),const SizedBox(height: 12),Text(value['title'],textAlign: TextAlign.center,style: const TextStyle(fontSize: 20),)],),);}); // ('xxx','xxx')return tempList.toList();}@overrideWidget build(BuildContext context) {return GridView.count(crossAxisSpacing: 10.0,//水平子 Widget 之間間距mainAxisSpacing: 10.0,//垂直子 Widget 之間間距padding: const EdgeInsets.all(10),crossAxisCount: 2,//一行的 Widget 數(shù)量childAspectRatio: 0.7,//寬度和高度的比例children: _getListData(),);}
}

GridView.build實(shí)現(xiàn)動(dòng)態(tài)列表

// GridView.builder實(shí)現(xiàn)動(dòng)態(tài)列表class HomePage extends StatelessWidget {const HomePage({Key? key}) : super(key: key);Widget _getListData(context, index) {return Container(decoration: BoxDecoration(border: Border.all(color: const Color.fromRGBO(233, 233, 233, 0.9), width: 1)),child: Column(children: <Widget>[Image.asset(listData[index]['imageUrl']),const SizedBox(height: 12),Text(listData[index]['title'],textAlign: TextAlign.center,style: const TextStyle(fontSize: 20),)],),height: 400,//設(shè)置高度沒(méi)有反應(yīng));}@overrideWidget build(BuildContext context) {return GridView.builder(//注意gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisSpacing: 10.0, //水平子 Widget 之間間距mainAxisSpacing: 10.0, //垂直子 Widget 之間間距crossAxisCount: 2, //一行的 Widget 數(shù)量),itemCount: listData.length,itemBuilder: _getListData,);}
}

2 Flutter?Paddiing組件

2.1 說(shuō)明? ? ? ??

????????在html中常見(jiàn)的布局標(biāo)簽都有padding屬性，但是Flutter中很多Widget是沒(méi)有padding屬性。這個(gè)時(shí)候?我們可以用Padding組件處理容器與子元素之間的間距

2.2 屬性

????????padding：padding值,?EdgeInsetss設(shè)置填充的值

????????child：子組件

2.3 示例

import 'package:flutter/material.dart';
import '../../res/listData.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({Key? key}): super(key: key); // This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: Scaffold(appBar: AppBar(title: const Text("FLutter App")),body: const HomePage(),),);}
}class HomePage extends StatelessWidget {const HomePage({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return GridView.count(padding: const EdgeInsets.all(10),crossAxisCount: 2,childAspectRatio: 1,children: [Padding(padding: const EdgeInsets.all(10),child: Image.asset('images/1.png', fit: BoxFit.cover),),Padding(padding: const EdgeInsets.all(10),child: Image.asset('images/2.png', fit: BoxFit.cover),),Padding(padding: const EdgeInsets.all(10),child: Image.asset('images/3.png', fit: BoxFit.cover),),Padding(padding: const EdgeInsets.all(10),child: Image.asset('images/4.png', fit: BoxFit.cover),),Padding(padding: const EdgeInsets.all(10),child: Image.asset('images/5.png', fit: BoxFit.cover),),Padding(padding: const EdgeInsets.all(10),child: Image.asset('images/6.png', fit: BoxFit.cover),),],);}
}

3 線性布局(Row和Column)

3.1 Row?水平布局組件

3.1.1 Row屬性

????????mainAxisAlignment?主軸的排序方式

????????crossAxisAlignment?次軸的排序方式

????????children?組件子元素

3.1.2 示例

import 'package:flutter/material.dart';
import '../../res/listData.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({Key? key}): super(key: key); // This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: Scaffold(appBar: AppBar(title: const Text("FLutter App")),body: const HomePage(),),);}
}class HomePage extends StatelessWidget {const HomePage({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return Container(height: double.infinity,width: double.infinity,color: Colors.black26,child: Row(crossAxisAlignment: CrossAxisAlignment.center,mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [IconContainer(Icons.home, color: Colors.red),IconContainer(Icons.search, color: Colors.blue),IconContainer(Icons.send, color: Colors.orange),],),);}
}class IconContainer extends StatelessWidget {Color color;double size;IconData icon;IconContainer(this.icon,{Key? key, this.color = Colors.red, this.size = 32.0}): super(key: key);@overrideWidget build(BuildContext context) {return Container(height: 100.0,width: 100.0,color: color,child: Center(child: Icon(icon, size: size, color: Colors.white)),);}
}

3.2 Column垂直布局組件

3.2.1 Column屬性

????????mainAxisAlignment?主軸的排序方式

????????crossAxisAlignment?次軸的排序方式

????????children?組件子元素

3.2.2 示例

import 'package:flutter/material.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({Key? key}): super(key: key); // This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: Scaffold(appBar: AppBar(title: const Text("Flutter App")),body: const HomePage(),),);}
}class HomePage extends StatelessWidget {const HomePage({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return Container(height: double.infinity,width: double.infinity,color: Colors.black26,child: Column(crossAxisAlignment: CrossAxisAlignment.center,mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [IconContainer(Icons.home, color: Colors.red),IconContainer(Icons.search, color: Colors.blue),IconContainer(Icons.send, color: Colors.orange),],),);}
}class IconContainer extends StatelessWidget {Color color;double size;IconData icon;IconContainer(this.icon,{Key? key, this.color = Colors.red, this.size = 32.0}): super(key: key);@overrideWidget build(BuildContext context) {return Container(height: 100.0,width: 100.0,color: color,child: Center(child: Icon(icon, size: size, color: Colors.white)),);}
}

3.3 double.in?nity?和double.maxFinite

3.3.1 說(shuō)明

double.in?nity?和double.maxFinite可以讓當(dāng)前元素的width或者h(yuǎn)eight達(dá)到父元素的尺寸

3.3.2 底層代碼

static?const?double?nan?=?0.0?/?0.0; static?const?double?infinity?=?1.0?/?0.0; static?const?double?negativeInfinity?=?-infinity; static?const?double?minPositive?=?5e-324; static?const?double?maxFinite?=?1.7976931348623157e+308;

3.3.3 如下可以讓Container鋪滿整個(gè)屏幕

Widget?build(BuildContext?context)?{return?Container(height:?double.infinity,width:?double.infinity,color:?Colors.black26,child:?Column(crossAxisAlignment:?CrossAxisAlignment.center,mainAxisAlignment:?MainAxisAlignment.spaceEvenly,children:?[IconContainer(Icons.home,?color:?Colors.red),IconContainer(Icons.search,?color:?Colors.blue),IconContainer(Icons.send,?color:?Colors.orange),],),);}

?

3.3.4 如下可以讓Container的寬度和高度等于父元素的寬度高度

@override
Widget build(BuildContext context) {return Container(height: 400,width: 600,color: Colors.red,child: Container(height: double.maxFinite,width: double.infinity,color: Colors.black26,child: Column(crossAxisAlignment: CrossAxisAlignment.center,mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [IconContainer(Icons.home, color: Colors.red),IconContainer(Icons.search, color: Colors.blue),IconContainer(Icons.send, color: Colors.orange),],),),);
}

3.4 彈性布局(Flex?Expanded)

3.4.1 說(shuō)明

Flex組件可以沿著水平或垂直方向排列子組件，如果你知道主軸方向，使用?Row或?Column會(huì)方便一?些，??因?yàn)?Row和?Column都繼承自?Flex?，參數(shù)基本相同，所以能使用Flex的地方基本上都可以使用????Row或?Column?。?Flex本身功能是很強(qiáng)大的，它也可以和?Expanded組件配合實(shí)現(xiàn)彈性布局?。

3.4.2 水平彈性布局

示例1

import?'package:flutter/material.dart';void?main()?{runApp(const?MyApp());
}class?MyApp?extends?StatelessWidget?{const?MyApp({Key??key})?:?super(key:?key);//?This?widget?is?the?root?of?your?application.@overrideWidget?build(BuildContext?context)?{return?MaterialApp(title:?'Flutter?Demo',theme:?ThemeData(primarySwatch:?Colors.blue,),home:?Scaffold(appBar:?AppBar(title:?const?Text("Flutter?App")),body:?const?HomePage(),),);}
}class?HomePage?extends?StatelessWidget?{const?HomePage({Key??key})?:?super(key:?key);@overrideWidget?build(BuildContext?context)?{return?Flex(direction:?Axis.horizontal,children:?[Expanded(flex:?2,?child:?IconContainer(Icons.home,?color:?Colors.red)),Expanded(flex:?1,child:?IconContainer(Icons.search,?color:?Colors.orange),)],);}
}class?IconContainer?extends?StatelessWidget?{Color?color;double?size;IconData?icon;IconContainer(this.icon,{Key??key,?this.color?=?Colors.red,?this.size?=?32.0}):?super(key:?key);@overrideWidget?build(BuildContext?context)?{return?Container(height:?100.0,width:?100.0,color:?color,child:?Center(child:?Icon(icon,?size:?size,?color:?Colors.white)),);}
}

示例2

import 'package:flutter/material.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({Key? key}): super(key: key); // This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: Scaffold(appBar: AppBar(title: const Text("Flutter App")),body: const HomePage(),),);}
}class HomePage extends StatelessWidget {const HomePage({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return Row(children: [Expanded(flex: 2, child: IconContainer(Icons.home, color: Colors.red)),Expanded(flex: 1,child: IconContainer(Icons.search, color: Colors.orange),)],);}
}class IconContainer extends StatelessWidget {Color color;double size;IconData icon;IconContainer(this.icon,{Key? key, this.color = Colors.red, this.size = 32.0}): super(key: key);@overrideWidget build(BuildContext context) {return Container(height: 100.0,width: 100.0,color: color,child: Center(child: Icon(icon, size: size, color: Colors.white)),);}
}

3.4.3 垂直彈性布局

import?'package:flutter/material.dart';void?main()?{runApp(const?MyApp());
}class?MyApp?extends?StatelessWidget?{const?MyApp({Key??key})?:?super(key:?key);//?This?widget?is?the?root?of?your?application.@overrideWidget?build(BuildContext?context)?{return?MaterialApp(title:?'Flutter?Demo',theme:?ThemeData(primarySwatch:?Colors.blue,),home:?Scaffold(appBar:?AppBar(title:?const?Text("Flutter?App")),body:?const?HomePage(),),);}
}class?HomePage?extends?StatelessWidget?{const?HomePage({Key??key})?:?super(key:?key);@overrideWidget?build(BuildContext?context)?{return?Column(children:?[Expanded(flex:?2,?child:?IconContainer(Icons.home,?color:?Colors.red)),Expanded(flex:?1,child:?IconContainer(Icons.search,?color:?Colors.orange),)],);}
}class?IconContainer?extends?StatelessWidget?{Color?color;double?size;IconData?icon;IconContainer(this.icon,{Key??key,?this.color?=?Colors.red,?this.size?=?32.0}):?super(key:?key);@overrideWidget?build(BuildContext?context)?{return?Container(height:?100.0,width:?100.0,color:?color,child:?Center(child:?Icon(icon,?size:?size,?color:?Colors.white)),);}
}

3.4.4 使用?Row?或?Co1umn?結(jié)合Expanded實(shí)現(xiàn)下面示例

示例圖

代碼

import?'package:flutter/material.dart';void?main()?{runApp(const?MyApp());
}class?MyApp?extends?StatelessWidget?{const?MyApp({Key??key})?:?super(key:?key);//?This?widget?is?the?root?of?your?application.@overrideWidget?build(BuildContext?context)?{return?MaterialApp(title:?'Flutter?Demo',theme:?ThemeData(primarySwatch:?Colors.blue,),home:?Scaffold(appBar:?AppBar(title:?const?Text("Flutter?App")),body:?const?HomePage(),),);}
}class?HomePage?extends?StatelessWidget?{const?HomePage({Key??key})?:?super(key:?key);@overrideWidget?build(BuildContext?context)?{return?ListView(children:?[Container(width:?double.infinity,height:?200,color:?Colors.black,),const?SizedBox(height:?10),Row(children:?[Expanded(flex:?2,child:?SizedBox(height:?180,child:?Image.asset("images/2.png",fit:?BoxFit.cover),),),const?SizedBox(width:?10),Expanded(flex:?1,child:?SizedBox(height:?180,child:?Column(children:?[Expanded(flex:?1,child:?SizedBox(width:?double.infinity,child:?Image.asset("images/3.png",fit:?BoxFit.cover),),),const?SizedBox(height:?10),Expanded(flex:?2,child:?SizedBox(width:?double.infinity,child:?Image.asset("images/4.png",fit:?BoxFit.cover),),)],),))],)],);}
}

4 Flutter?Wrap組件

4.1 說(shuō)明

????????Wrap可以實(shí)現(xiàn)流布局，單行的Wrap跟Row表現(xiàn)幾乎一致，單列的Wrap則跟Column表現(xiàn)幾乎一致。但?Row與Column都是單行單列的，??Wrap則突破了這個(gè)限制，??mainAxis上空間不足時(shí)，則向crossAxis上?去擴(kuò)展顯示。

4.2 屬性

4.2.1 direction

????????主軸的方向，默認(rèn)水平

4.2.2 alignment

????????主軸的對(duì)其方式

4.2.3 spacing

????????主軸方向上的間距

4.2.4 textDirection

????????文本方向

4.2.5 verticalDirection

????????定義了children擺放順序，默認(rèn)是down，見(jiàn)Flex相關(guān)屬性介紹。

4.2.6 runAlignment

????????run的對(duì)齊方式。??run可以理解為新的行或者列，如果是水平方向布局的話，?run可以理解為新的一行

4.2.7 runSpacing

????????run的間距

4.3 示例

import 'package:flutter/material.dart';
import '../../res/listData.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({Key? key}): super(key: key); // This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: Scaffold(appBar: AppBar(title: const Text("FLutter App")),body: const LayoutDemo(),),);}
}class LayoutDemo extends StatelessWidget {const LayoutDemo({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return Padding(padding: const EdgeInsets.all(3),child: Wrap(spacing: 5,runSpacing: 5,direction: Axis.vertical,alignment: WrapAlignment.start,runAlignment: WrapAlignment.center,children: <Widget>[Button("第1集", onPressed: () {}),Button("第2集", onPressed: () {}),Button("第3集", onPressed: () {}),Button("第4集", onPressed: () {}),Button("第5集", onPressed: () {}),Button("第6集", onPressed: () {}),Button("第7集", onPressed: () {}),Button("第8集", onPressed: () {}),Button("第9集", onPressed: () {}),Button("第10集", onPressed: () {}),Button("第11集", onPressed: () {}),Button("第12集", onPressed: () {}),Button("第13集", onPressed: () {}),Button("第14集", onPressed: () {}),Button("第15集", onPressed: () {}),Button("第16集", onPressed: () {}),Button("第17集", onPressed: () {}),Button("第18集", onPressed: () {}),],),);}
}class Button extends StatelessWidget {String text;void Function()? onPressed;Button(this.text, {Key? key, required this.onPressed}) : super(key: key);@overrideWidget build(BuildContext context) {return ElevatedButton(onPressed: onPressed,style: ButtonStyle(backgroundColor:MaterialStateProperty.all(const Color.fromARGB(255, 236, 233, 233)),foregroundColor: MaterialStateProperty.all(Colors.black45),),child: Text(text),);}
}

4.4 示例2

import 'package:flutter/material.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({Key? key}): super(key: key); // This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: Scaffold(appBar: AppBar(title: const Text("Flutter App")),body: const LayoutDemo(),),);}
}class LayoutDemo extends StatelessWidget {const LayoutDemo({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return Padding(padding: const EdgeInsets.all(10),child: ListView(children: [Row(children: [Text("熱搜",style: Theme.of(context).textTheme.headline6,)],),const Divider(),Wrap(spacing: 10,runSpacing: 12,children: [Button("女裝", onPressed: () {}),Button("筆記本", onPressed: () {}),Button("玩具", onPressed: () {}),Button("文學(xué)", onPressed: () {}),Button("女裝", onPressed: () {}),Button("時(shí)尚", onPressed: () {}),Button("女裝", onPressed: () {}),Button("女裝", onPressed: () {}),],),const SizedBox(height: 10),Row(children: [Text("歷史記錄",style: Theme.of(context).textTheme.headline6,)],),const Divider(),Column(children: const [ListTile(title: Text("女裝"),),Divider(),ListTile(title: Text("時(shí)尚"),),Divider(),],),const SizedBox(height: 40),Padding(padding: const EdgeInsets.all(20),child: OutlinedButton.icon(onPressed: () {},style: ButtonStyle(foregroundColor: MaterialStateProperty.all(Colors.black38)),icon: const Icon(Icons.delete),label: const Text("清空歷史記錄")),)]),);}
}class Button extends StatelessWidget {String text;void Function()? onPressed;Button(this.text, {Key? key, required this.onPressed}) : super(key: key);@overrideWidget build(BuildContext context) {return ElevatedButton(onPressed: onPressed,style: ButtonStyle(backgroundColor:MaterialStateProperty.all(const Color.fromARGB(255, 236, 233, 233)),foregroundColor: MaterialStateProperty.all(Colors.black45),),child: Text(text),);}
}

5 層疊布局(Stack、??Align、Positioned)

5.1 Flutter?Stack組件

5.1.1 說(shuō)明

????????Stack表示堆的意思，我們可以用Stack或者Stack結(jié)合Align或者Stack結(jié)合?Positiond來(lái)實(shí)現(xiàn)頁(yè)面的定位?布局

5.1.2 屬性

????????alignment：配置所有子元素的顯示位置

????????children：子組件

5.1.3 示例

import?'package:flutter/material.dart';void?main()?{runApp(const?MyApp());
}class?MyApp?extends?StatelessWidget?{const?MyApp({Key??key})?:?super(key:?key);//?This?widget?is?the?root?of?your?application.@overrideWidget?build(BuildContext?context)?{return?MaterialApp(title:?'Flutter?Demo',theme:?ThemeData(primarySwatch:?Colors.blue,),home:?Scaffold(appBar:?AppBar(title:?const?Text("Flutter?App")),body:?const?HomePage(),),);}
}class?HomePage?extends?StatelessWidget?{const?HomePage({Key??key})?:?super(key:?key);@overrideWidget?build(BuildContext?context)?{return?Container(height:?120.0,width:?120.0,color:?Colors.blue.shade50,child:?const?Align(alignment:?Alignment.topRight,child:?FlutterLogo(size:?60,),),);}
}//Align結(jié)合Alignment?參數(shù)
class?HomePage2?extends?StatelessWidget?{const?HomePage2({Key??key})?:?super(key:?key);@overrideWidget?build(BuildContext?context)?{return?Container(height:?120.0,width:?120.0,color:?Colors.blue.shade50,child:?const?Align(alignment:?Alignment(2,?0.0),child:?FlutterLogo(size:?60,),));}
}//Align結(jié)合Stack組件
class?HomePage3?extends?StatelessWidget?{const?HomePage3({Key??key})?:?super(key:?key);@overrideWidget?build(BuildContext?context)?{return?Center(child:?Container(height:?400,width:?300,color:?Colors.red,child:?Stack(//?alignment:?Alignment.center,children:?const?<Widget>[Align(alignment:?Alignment(1,?-0.2),child:?Icon(Icons.home,?size:?40,?color:?Colors.white),),Align(alignment:?Alignment.center,child:?Icon(Icons.search,?size:?30,?color:?Colors.white),),Align(alignment:?Alignment.bottomRight,child:?Icon(Icons.settings_applications,size:?30,?color:?Colors.white),)],),),);}
}

5.2 Flutter?Stack?Align

5.2.1 說(shuō)明

????????Align組件可以調(diào)整子組件的位置?,?Stack組件中結(jié)合Align組件也可以控制每個(gè)子元素的顯示位置

5.2.2 屬性

????????alignment：配置所有子元素的顯示位置

????????child：子組件

5.2.3 Align結(jié)合Container的使用

說(shuō)明??

????????FlutterLogo?是Flutter?SDK?提供的一個(gè)組件，內(nèi)容就是?Flutter?的?log

示例

import 'package:flutter/material.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({Key? key}): super(key: key); // This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: Scaffold(appBar: AppBar(title: const Text("Flutter App")),body: const HomePage(),),);}
}class HomePage extends StatelessWidget {const HomePage({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return Center(child: Stack(alignment: Alignment.topLeft,children: [Container(height: 400,width: 300,color: Colors.red,),const Text("這是一個(gè)文本",style: TextStyle(fontSize: 40, color: Colors.amber),)],),);}
}



5.3 Flutter?Stack?Positioned

5.3.1 說(shuō)明

????????Stack組件中結(jié)合Positioned組件也可以控制每個(gè)子元素的顯示位置

5.3.2 屬性

????????top：子元素距離頂部的距離

????????bottom：子元素距離底部的距離

????????left：子元素距離左側(cè)距離

????????right：子元素距離右側(cè)距離

????????child：子組件

????????width：組件的高度???(注意：寬度和高度必須是固定值，沒(méi)法使用double.in?nity)

????????height：子組件的高度

示例

import 'package:flutter/material.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({Key? key}): super(key: key); // This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: Scaffold(appBar: AppBar(title: const Text("Flutter App")),body: const HomePage(),),);}
} //Stack組件中結(jié)合Positioned組件也可以控制每個(gè)子元素的顯示位置class HomePage extends StatelessWidget {const HomePage({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {// FlutterMediaQuery獲取屏幕寬度和高度f(wàn)inal size = MediaQuery.of(context).size;final width = size.width;final height = size.height;return Center(child: Container(height: height,width: width,color: Colors.red,child: Stack(alignment: Alignment.center,children: const <Widget>[Positioned(left: 10,child: Icon(Icons.home, size: 40, color: Colors.white),),Positioned(bottom: 0,left: 100,child: Icon(Icons.search, size: 30, color: Colors.white),),Positioned(right: 0,child: Icon(Icons.settings_applications,size: 30, color: Colors.white),)],),),);}
}// Flutter Stack Positioned固定導(dǎo)航案例
class HomePage2 extends StatelessWidget {const HomePage2({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {final size = MediaQuery.of(context).size;return Stack(children: [ListView(padding: const EdgeInsets.only(top: 45),children: const [ListTile(title: Text("這是一個(gè)標(biāo)題 "),),ListTile(title: Text("這是一個(gè)標(biāo)題"),),ListTile(title: Text("這是一個(gè)標(biāo)題"),),ListTile(title: Text("這是一個(gè)標(biāo)題"),),ListTile(title: Text("這是一個(gè)標(biāo)題"),),ListTile(title: Text("這是一個(gè)標(biāo)題"),),ListTile(title: Text("這是一個(gè)標(biāo)題"),),ListTile(title: Text("這是一個(gè)標(biāo)題"),),ListTile(title: Text("這是一個(gè)標(biāo)題"),),ListTile(title: Text("這是一個(gè)標(biāo)題"),),ListTile(title: Text("這是一個(gè)標(biāo)題"),),ListTile(title: Text("這是一個(gè)標(biāo)題"),),ListTile(title: Text("這是一個(gè)標(biāo)題"),),ListTile(title: Text("這是一個(gè)標(biāo)題"),),ListTile(title: Text("這是一個(gè)標(biāo)題"),),ListTile(title: Text("這是一個(gè)標(biāo)題"),),ListTile(title: Text("這是一個(gè)標(biāo)題"),),ListTile(title: Text("這是一個(gè)標(biāo)題"),),ListTile(title: Text("這是一個(gè)標(biāo)題"),),ListTile(title: Text("這是一個(gè)標(biāo)題"),),ListTile(title: Text("這是一個(gè)標(biāo)題"),),ListTile(title: Text("這是一個(gè)標(biāo)題"),),ListTile(title: Text("這是一個(gè)標(biāo)題"),),],),Positioned(top: 0,left: 0,height: 40,width: size.width,child: Container(alignment: Alignment.center,color: Colors.black,child: const Text("你好FLutter",style: TextStyle(color: Colors.white),),))],);}
}

6 Flutter?AspectRatio

6.1 說(shuō)明

6.1.1?AspectRatio的作用是根據(jù)設(shè)置調(diào)整子元素child的寬高比。

6.1.2?AspectRatio首先會(huì)在布局限制條件允許的范圍內(nèi)盡可能的擴(kuò)展，??widget的高度是由寬度和比率決定?的，類似于BoxFit中的contain，按照固定比率去盡量占滿區(qū)域。

6.1.3?如果在滿足所有限制條件過(guò)后無(wú)法找到一個(gè)可行的尺寸，??AspectRatio最終將會(huì)去優(yōu)先適應(yīng)布局限制條?件，而忽略所設(shè)置的比率。

6.2 屬性

6.2.1 aspectRatio

????????寬高比，最終可能不會(huì)根據(jù)這個(gè)值去布局，具體則要看綜合因素，外層是否允許?按照這種比率進(jìn)行布局，這只是一個(gè)參考值

6.2.2 child

????????子組件

6.3 示例

import 'package:flutter/material.dart';void main() {runApp(const MyApp());
} //Flutter AspectRatioclass MyApp extends StatelessWidget {const MyApp({Key? key}): super(key: key); // This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: Scaffold(appBar: AppBar(title: const Text("Flutter App")),body: const HomePage(),),);}
}class HomePage extends StatelessWidget {const HomePage({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {// TODO: implement buildreturn Container(width: 200,color: Colors.yellow,child: AspectRatio(aspectRatio: 2.0 / 1.0,child: Container(color: Colors.red,),child: LayoutDemo(),),);}
}class LayoutDemo extends StatelessWidget {@overrideWidget build(BuildContext context) {// TODO: implement buildreturn AspectRatio(aspectRatio: 3.0 / 1.0,child: Container(color: Colors.blue,),);}
}