【Flutter】Flutter 布局组件 ( FractionallySizedBox 组件 | Stack 布局组件 | Positioned 组件 )
生活随笔
收集整理的這篇文章主要介紹了
【Flutter】Flutter 布局组件 ( FractionallySizedBox 组件 | Stack 布局组件 | Positioned 组件 )
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
文章目錄
- 一、FractionallySizedBox 組件
- 二、Stack 布局組件
- 三、Positioned 組件
- 四、 完整代碼示例
- 五、 相關(guān)資源
一、FractionallySizedBox 組件
FractionallySizedBox 組件 : 可控制組件在水平/垂直方向上填充滿父容器 ;
class FractionallySizedBox extends SingleChildRenderObjectWidget {const FractionallySizedBox({Key key,this.alignment = Alignment.center,this.widthFactor,this.heightFactor,Widget child,}) : assert(alignment != null),assert(widthFactor == null || widthFactor >= 0.0),assert(heightFactor == null || heightFactor >= 0.0),super(key: key, child: child); }FractionallySizedBox 組件用法 :
- 設(shè)置寬度充滿父容器 : widthFactor 字段設(shè)置 ;
- 設(shè)置高度填充滿父容器 : heightFactor 字段設(shè)置 ;
- 設(shè)置平鋪的組件 : child 字段設(shè)置 Widget 組件 ;
代碼示例 :
// 水平/垂直方向平鋪組件 FractionallySizedBox(// 設(shè)置寬度充滿父容器widthFactor: 1,// 要設(shè)置的水平 / 垂直方向的平鋪操作的組件child: Container(decoration: BoxDecoration(color: Colors.black),child: Text("高度自適應(yīng), 寬度充滿父容器",style: TextStyle(color: Colors.amberAccent),),), )二、Stack 布局組件
Stack 布局組件 : 相當(dāng)于幀布局 ;
class Stack extends MultiChildRenderObjectWidget {/// Creates a stack layout widget.////// By default, the non-positioned children of the stack are aligned by their/// top left corners.Stack({Key key,this.alignment = AlignmentDirectional.topStart,this.textDirection,this.fit = StackFit.loose,this.overflow = Overflow.clip,List<Widget> children = const <Widget>[],}) : super(key: key, children: children); }Stack 布局組件用法 : 在 children 字段設(shè)置若干 Widget 組件 , 最后一個(gè)組件在最頂端顯示 , 覆蓋前面的組件 ;
代碼示例 :
// 幀布局 Stack(children: <Widget>[Image.network("https://img-blog.csdnimg.cn/20210301145757946.png",width: 100,height: 100,),Image.network("https://img-blog.csdnimg.cn/20210228180808133.png",width: 25,height: 25,),], ),三、Positioned 組件
Positioned 組件 : 用于在 Stack 布局中指定某個(gè)組件的位置
class Positioned extends ParentDataWidget<Stack> {/// Creates a widget that controls where a child of a [Stack] is positioned.////// Only two out of the three horizontal values ([left], [right],/// [width]), and only two out of the three vertical values ([top],/// [bottom], [height]), can be set. In each case, at least one of/// the three must be null.////// See also:////// * [Positioned.directional], which specifies the widget's horizontal/// position using `start` and `end` rather than `left` and `right`./// * [PositionedDirectional], which is similar to [Positioned.directional]/// but adapts to the ambient [Directionality].const Positioned({Key key,this.left, // 設(shè)置組件距離左側(cè)距離this.top, // 設(shè)置組件距離頂部距離this.right, // 設(shè)置組件距離右側(cè)距離this.bottom, // 設(shè)置組件距離底部距離this.width, // 設(shè)置組件寬度this.height, // 設(shè)置組件高度@required Widget child,}) : assert(left == null || right == null || width == null),assert(top == null || bottom == null || height == null),super(key: key, child: child); }Positioned 組件用法 :
- 設(shè)置組件寬度 : width 字段 ;
- 設(shè)置組件高度 : height 字段 ;
- 設(shè)置組件距離左側(cè)距離 : left 字段 ;
- 設(shè)置組件距離頂部距離 : top 字段 ;
- 設(shè)置組件距離右側(cè)距離 : right 字段 ;
- 設(shè)置組件距離底部距離 : bottom 字段 ;
代碼示例 :
// 幀布局 Stack(children: <Widget>[Image.network("https://img-blog.csdnimg.cn/20210301145757946.png",width: 100,height: 100,),// 設(shè)置組件位置在 Stack 的相對(duì)位置Positioned(right: 0, // 距離右側(cè) 0 距離bottom: 0, // 距離底部 0 距離// 設(shè)置約束的組件位置child: Image.network("https://img-blog.csdnimg.cn/20210228180808133.png",width: 25,height: 25,),),], ),四、 完整代碼示例
完整代碼示例 :
import 'package:flutter/material.dart';class LayoutPage extends StatefulWidget {@override_LayoutPageState createState() => _LayoutPageState(); }class _LayoutPageState extends State<LayoutPage> {/// 當(dāng)前被選中的底部導(dǎo)航欄索引int _currentSelectedIndex = 0;// This widget is the root of your application.@overrideWidget build(BuildContext context) {// 文本組件樣式 , 可以設(shè)置給 Text 文本組件// 設(shè)置字體大小 20, 顏色紅色TextStyle textStyle = TextStyle(fontSize: 20, color: Colors.red);return MaterialApp(title: '布局組件示例',theme: ThemeData(primarySwatch: Colors.blue,),home: Scaffold(// 頂部標(biāo)題欄appBar: AppBar(title: Text('布局組件示例'),),// 底部導(dǎo)航欄 BottomNavigationBar 設(shè)置// items 可以設(shè)置多個(gè) BottomNavigationBarItembottomNavigationBar: BottomNavigationBar(// 設(shè)置當(dāng)前選中的底部導(dǎo)航索引currentIndex: _currentSelectedIndex,// 設(shè)置點(diǎn)擊底部導(dǎo)航欄的回調(diào)事件 , index 參數(shù)是點(diǎn)擊的索引值onTap: (index){// 回調(diào) StatefulWidget 組件的 setState 設(shè)置狀態(tài)的方法 , 修改當(dāng)前選中索引// 之后 BottomNavigationBar 組件會(huì)自動(dòng)更新當(dāng)前選中的選項(xiàng)卡setState(() {// 改變 int _currentSelectedIndex 變量的狀態(tài)_currentSelectedIndex = index;});},// 條目items: [// 設(shè)置底部導(dǎo)航欄條目, 每個(gè)條目可以設(shè)置一個(gè)圖標(biāo)BottomNavigationBarItem(// 默認(rèn)狀態(tài)下的圖標(biāo)icon: Icon(Icons.home, color: Colors.grey,),// 激活狀態(tài)下的圖標(biāo)activeIcon: Icon(Icons.home, color: Colors.red,),// 設(shè)置標(biāo)題title: Text("主頁(yè)")),// 設(shè)置底部導(dǎo)航欄條目, 每個(gè)條目可以設(shè)置一個(gè)圖標(biāo)BottomNavigationBarItem(// 默認(rèn)狀態(tài)下的圖標(biāo)icon: Icon(Icons.settings, color: Colors.grey,),// 激活狀態(tài)下的圖標(biāo)activeIcon: Icon(Icons.settings, color: Colors.red,),// 設(shè)置標(biāo)題title: Text("設(shè)置"))],),// 設(shè)置懸浮按鈕floatingActionButton: FloatingActionButton(onPressed: (){print("懸浮按鈕點(diǎn)擊");},child: Text("懸浮按鈕組件"),),// Container 容器使用body:_currentSelectedIndex == 0 ?// 刷新指示器組件RefreshIndicator(// 顯示的內(nèi)容child: ListView(children: <Widget>[Container( // 對(duì)應(yīng)底部導(dǎo)航欄設(shè)置選項(xiàng)卡// 設(shè)置容器的裝飾器 , BoxDecoration 是最常用的裝飾器// 可以自行查看 BoxDecoration 中可以設(shè)置的屬性decoration: BoxDecoration(color: Colors.white),// 設(shè)置 child 子組件居中方式, 居中放置alignment: Alignment.center,// 子組件, 子組件設(shè)置為一個(gè) Column 組件child: Column(// Column 子組件, 這里設(shè)置 Text 文本組件children: <Widget>[Text("主頁(yè)面選項(xiàng)卡, 下拉刷新"),// 水平方向排列的線性布局Row(children: <Widget>[// 原始圖片, 用于對(duì)比Image.network("https://img-blog.csdnimg.cn/20210301145757946.png",width: 100,height: 100,),// 圓形裁剪組件 , 將 child 布局裁剪成圓形ClipOval(// 使用 SizedBox 組件約束布局大小child: SizedBox(width: 100,height: 100,// 使用 SizedBox 約束該 Image 組件大小child: Image.network("https://img-blog.csdnimg.cn/20210301145757946.png"),),),Padding(// 設(shè)置內(nèi)邊距 5padding: EdgeInsets.all(15),// 方形裁剪組件 , 將組件裁剪成方形child: ClipRRect(// 設(shè)置裁剪圓角, 四個(gè)角設(shè)置半徑為 10 的圓角borderRadius: BorderRadius.all(Radius.circular(10)),// 修改透明度組件 , 這里設(shè)置 50% 透明度child: Opacity(opacity: 0.5,// 設(shè)置 100x100 大小的圖片組件child: Image.network("https://img-blog.csdnimg.cn/20210301145757946.png",width: 100,height: 100,),),),),],),// 設(shè)置一個(gè)布局容器 , 用于封裝 PageView 組件Container(// 設(shè)置高度height: 200,// 設(shè)置邊距margin: EdgeInsets.all(15),// 設(shè)置裝飾, 背景深橙色decoration: BoxDecoration(color: Colors.white),// 設(shè)置子組件 PageView 的裁剪組件child:PhysicalModel(color: Colors.transparent,// 設(shè)置圓角半徑 15borderRadius: BorderRadius.circular(50),// 設(shè)置裁剪行為 , 抗鋸齒clipBehavior: Clip.antiAlias,// 設(shè)置 PageView 組件child:PageView(// 設(shè)置 PageView 中封裝的若干組件children: <Widget>[// 第一個(gè)頁(yè)面組件Container(// 設(shè)置居中方式 , 居中顯示alignment:Alignment.center,// 設(shè)置裝飾器 , 綠色背景decoration: BoxDecoration(color: Colors.green),// 顯示的主要文字child: Text("頁(yè)面 0", style: TextStyle(fontSize: 20, color: Colors.black),),),// 第二個(gè)頁(yè)面組件Container(// 設(shè)置居中方式 , 居中顯示alignment:Alignment.center,// 設(shè)置裝飾器 , 綠色背景decoration: BoxDecoration(color: Colors.red),// 顯示的主要文字child: Text("頁(yè)面 1", style: TextStyle(fontSize: 20, color: Colors.white),),),// 第三個(gè)頁(yè)面組件Container(// 設(shè)置居中方式 , 居中顯示alignment:Alignment.center,// 設(shè)置裝飾器 , 綠色背景decoration: BoxDecoration(color: Colors.black),// 顯示的主要文字child: Text("頁(yè)面 2", style: TextStyle(fontSize: 20, color: Colors.yellow),),),],),),),Container(child: Column(children: <Widget>[// 水平/垂直方向平鋪組件FractionallySizedBox(// 設(shè)置寬度充滿父容器widthFactor: 1,// 要設(shè)置的水平 / 垂直方向的平鋪操作的組件child: Container(decoration: BoxDecoration(color: Colors.black),child: Text("高度自適應(yīng), 寬度充滿父容器",style: TextStyle(color: Colors.amberAccent),),),)],),),// 幀布局Stack(children: <Widget>[Image.network("https://img-blog.csdnimg.cn/20210301145757946.png",width: 100,height: 100,),// 設(shè)置組件位置在 Stack 的相對(duì)位置Positioned(right: 0, // 距離右側(cè) 0 距離bottom: 0, // 距離底部 0 距離// 設(shè)置約束的組件位置child: Image.network("https://img-blog.csdnimg.cn/20210228180808133.png",width: 25,height: 25,),),],),],),),],),// 刷新時(shí)回調(diào)的方法// 列表發(fā)生下拉操作時(shí), 回調(diào)該方法// 該回調(diào)是 Future 類型的onRefresh: _refreshIndicatorOnRefresh,):Container( // 對(duì)應(yīng)底部導(dǎo)航欄設(shè)置選項(xiàng)卡// 設(shè)置容器的裝飾器 , BoxDecoration 是最常用的裝飾器// 可以自行查看 BoxDecoration 中可以設(shè)置的屬性decoration: BoxDecoration(color: Colors.white),// 設(shè)置 child 子組件居中方式, 居中放置alignment: Alignment.center,// 子組件, 子組件設(shè)置為一個(gè) Column 組件child: Column(// Column 子組件, 這里設(shè)置 Text 文本組件children: <Widget>[Text("設(shè)置頁(yè)面選項(xiàng)卡")],),) , // 該設(shè)置與 _currentSelectedIndex == 0? 相對(duì)應(yīng), ?: 三目運(yùn)算符),);}/// RefreshIndicator 發(fā)生下拉操作時(shí), 回調(diào)該方法/// 該方啊是一個(gè)異步方法 , 在方法體前添加 async 關(guān)鍵字Future<Null> _refreshIndicatorOnRefresh() async{// 暫停 500 ms , 使用 await 關(guān)鍵字實(shí)現(xiàn)// 在這 500 ms 之間 , 列表處于刷新狀態(tài)// 500 ms 之后 , 列表變?yōu)榉撬⑿聽顟B(tài)await Future.delayed(Duration(milliseconds: 500));return null;}}運(yùn)行效果展示 :
五、 相關(guān)資源
參考資料 :
- Flutter 官網(wǎng) : https://flutter.dev/
- Flutter 開發(fā)文檔 : https://flutter.cn/docs ( 強(qiáng)烈推薦 )
- 官方 GitHub 地址 : https://github.com/flutter
- Flutter 中文社區(qū) : https://flutter.cn/
- Flutter 實(shí)用教程 : https://flutter.cn/docs/cookbook
- Flutter CodeLab : https://codelabs.flutter-io.cn/
- Dart 中文文檔 : https://dart.cn/
- Dart 開發(fā)者官網(wǎng) : https://api.dart.dev/
- Flutter 中文網(wǎng) ( 非官方 , 翻譯的很好 ) : https://flutterchina.club/ , http://flutter.axuer.com/docs/
- Flutter 相關(guān)問(wèn)題 : https://flutterchina.club/faq/ ( 入門階段推薦看一遍 )
博客源碼下載 :
-
GitHub 地址 : https://github.com/han1202012/flutter_cmd ( 隨博客進(jìn)度一直更新 , 有可能沒(méi)有本博客的源碼 )
-
博客源碼快照 : https://download.csdn.net/download/han1202012/15484718 ( 本篇博客的源碼快照 , 可以找到本博客的源碼 )
總結(jié)
以上是生活随笔為你收集整理的【Flutter】Flutter 布局组件 ( FractionallySizedBox 组件 | Stack 布局组件 | Positioned 组件 )的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 【Flutter】Flutter 布局组
- 下一篇： 【Flutter】Flutter 布局组