文章目錄

• 一、PhysicalModel 組件
• 二、 完整代碼示例
• 三、 相關資源

一、PhysicalModel 組件

---

PhysicalModel 組件 : 可以將布局顯示成不同的形狀 ,

class PhysicalModel extends SingleChildRenderObjectWidget {const PhysicalModel({Key key,this.shape = BoxShape.rectangle, // 形狀 : 圓形 , 矩形 this.clipBehavior = Clip.none, // 裁剪行為this.borderRadius, // 圓角半徑 this.elevation = 0.0,@required this.color, // 顏色值 this.shadowColor = const Color(0xFF000000), // 背景顏色Widget child, // 被裁減的組件}) : assert(shape != null),assert(elevation != null && elevation >= 0.0),assert(color != null),assert(shadowColor != null),assert(clipBehavior != null),super(key: key, child: child); }

PhysicalModel 組件用法 :

• 設置裁剪形狀 : 默認矩形 , 可以在 shape 字段設置圓形 ;
• 設置背景顏色 : color 字段設置背景顏色 , Color 類型 ;
• 設置圓角半徑 : borderRadius 字段設置 , BorderRadius 類型 ;
• 設置裁剪行為 : clipBehavior 字段設置裁剪行為 , Clip 枚舉類型 , 無/有鋸齒/抗鋸齒/抗鋸齒+保存圖層 ;
• 設置被裁剪的組件 : child 字段設置被裁減的組件 , Widget 類型 ;

PhysicalModel(color: 背景顏色 ( Color 類型 ),// 設置圓角半徑 15borderRadius: 圓角半徑 ( BorderRadius 類型 ),// 設置裁剪行為 , 抗鋸齒clipBehavior: Clip 枚舉類型 ( 無/有鋸齒/抗鋸齒/抗鋸齒+保存圖層 ),// 設置被裁剪的組件 child: 被裁剪的組件 ( Widget 類型 ), )

代碼示例 : PhysicalModel 組件裁剪 PageView 組件 , 將 PageView 組件裁剪成圓角矩形樣式 ;

PhysicalModel(color: Colors.transparent,// 設置圓角半徑 15borderRadius: BorderRadius.circular(50),// 設置裁剪行為 , 抗鋸齒clipBehavior: Clip.antiAlias,// 設置 PageView 組件child:PageView(// 設置 PageView 中封裝的若干組件children: <Widget>[// 第一個頁面組件Container(// 設置居中方式 , 居中顯示alignment:Alignment.center,// 設置裝飾器 , 綠色背景decoration: BoxDecoration(color: Colors.green),// 顯示的主要文字child: Text("頁面 0", style: TextStyle(fontSize: 20, color: Colors.black),),),// 第二個頁面組件Container(// 設置居中方式 , 居中顯示alignment:Alignment.center,// 設置裝飾器 , 綠色背景decoration: BoxDecoration(color: Colors.red),// 顯示的主要文字child: Text("頁面 1", style: TextStyle(fontSize: 20, color: Colors.white),),),// 第三個頁面組件Container(// 設置居中方式 , 居中顯示alignment:Alignment.center,// 設置裝飾器 , 綠色背景decoration: BoxDecoration(color: Colors.black),// 顯示的主要文字child: Text("頁面 2", style: TextStyle(fontSize: 20, color: Colors.yellow),),),],), ),

二、 完整代碼示例

---

完整代碼示例 :

import 'package:flutter/material.dart';class LayoutPage extends StatefulWidget {@override_LayoutPageState createState() => _LayoutPageState(); }class _LayoutPageState extends State<LayoutPage> {/// 當前被選中的底部導航欄索引int _currentSelectedIndex = 0;// This widget is the root of your application.@overrideWidget build(BuildContext context) {// 文本組件樣式 , 可以設置給 Text 文本組件// 設置字體大小 20, 顏色紅色TextStyle textStyle = TextStyle(fontSize: 20, color: Colors.red);return MaterialApp(title: '布局組件示例',theme: ThemeData(primarySwatch: Colors.blue,),home: Scaffold(// 頂部標題欄appBar: AppBar(title: Text('布局組件示例'),),// 底部導航欄 BottomNavigationBar 設置// items 可以設置多個 BottomNavigationBarItembottomNavigationBar: BottomNavigationBar(// 設置當前選中的底部導航索引currentIndex: _currentSelectedIndex,// 設置點擊底部導航欄的回調事件 , index 參數是點擊的索引值onTap: (index){// 回調 StatefulWidget 組件的 setState 設置狀態的方法 , 修改當前選中索引// 之后 BottomNavigationBar 組件會自動更新當前選中的選項卡setState(() {// 改變 int _currentSelectedIndex 變量的狀態_currentSelectedIndex = index;});},// 條目items: [// 設置底部導航欄條目, 每個條目可以設置一個圖標BottomNavigationBarItem(// 默認狀態下的圖標icon: Icon(Icons.home, color: Colors.grey,),// 激活狀態下的圖標activeIcon: Icon(Icons.home, color: Colors.red,),// 設置標題title: Text("主頁")),// 設置底部導航欄條目, 每個條目可以設置一個圖標BottomNavigationBarItem(// 默認狀態下的圖標icon: Icon(Icons.settings, color: Colors.grey,),// 激活狀態下的圖標activeIcon: Icon(Icons.settings, color: Colors.red,),// 設置標題title: Text("設置"))],),// 設置懸浮按鈕floatingActionButton: FloatingActionButton(onPressed: (){print("懸浮按鈕點擊");},child: Text("懸浮按鈕組件"),),// Container 容器使用body:_currentSelectedIndex == 0 ?// 刷新指示器組件RefreshIndicator(// 顯示的內容child: ListView(children: <Widget>[Container( // 對應底部導航欄設置選項卡// 設置容器的裝飾器 , BoxDecoration 是最常用的裝飾器// 可以自行查看 BoxDecoration 中可以設置的屬性decoration: BoxDecoration(color: Colors.white),// 設置 child 子組件居中方式, 居中放置alignment: Alignment.center,// 子組件, 子組件設置為一個 Column 組件child: Column(// Column 子組件, 這里設置 Text 文本組件children: <Widget>[Text("主頁面選項卡, 下拉刷新"),// 水平方向排列的線性布局Row(children: <Widget>[// 原始圖片, 用于對比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(// 設置內邊距 5padding: EdgeInsets.all(15),// 方形裁剪組件 , 將組件裁剪成方形child: ClipRRect(// 設置裁剪圓角, 四個角設置半徑為 10 的圓角borderRadius: BorderRadius.all(Radius.circular(10)),// 修改透明度組件 , 這里設置 50% 透明度child: Opacity(opacity: 0.5,// 設置 100x100 大小的圖片組件child: Image.network("https://img-blog.csdnimg.cn/20210301145757946.png",width: 100,height: 100,),),),),],),// 設置一個布局容器 , 用于封裝 PageView 組件Container(// 設置高度height: 200,// 設置邊距margin: EdgeInsets.all(15),// 設置裝飾, 背景深橙色decoration: BoxDecoration(color: Colors.white),// 設置子組件 PageView 的裁剪組件child:PhysicalModel(color: Colors.transparent,// 設置圓角半徑 15borderRadius: BorderRadius.circular(50),// 設置裁剪行為 , 抗鋸齒clipBehavior: Clip.antiAlias,// 設置 PageView 組件child:PageView(// 設置 PageView 中封裝的若干組件children: <Widget>[// 第一個頁面組件Container(// 設置居中方式 , 居中顯示alignment:Alignment.center,// 設置裝飾器 , 綠色背景decoration: BoxDecoration(color: Colors.green),// 顯示的主要文字child: Text("頁面 0", style: TextStyle(fontSize: 20, color: Colors.black),),),// 第二個頁面組件Container(// 設置居中方式 , 居中顯示alignment:Alignment.center,// 設置裝飾器 , 綠色背景decoration: BoxDecoration(color: Colors.red),// 顯示的主要文字child: Text("頁面 1", style: TextStyle(fontSize: 20, color: Colors.white),),),// 第三個頁面組件Container(// 設置居中方式 , 居中顯示alignment:Alignment.center,// 設置裝飾器 , 綠色背景decoration: BoxDecoration(color: Colors.black),// 顯示的主要文字child: Text("頁面 2", style: TextStyle(fontSize: 20, color: Colors.yellow),),),],),),),],),),],),// 刷新時回調的方法// 列表發生下拉操作時, 回調該方法// 該回調是 Future 類型的onRefresh: _refreshIndicatorOnRefresh,):Container( // 對應底部導航欄設置選項卡// 設置容器的裝飾器 , BoxDecoration 是最常用的裝飾器// 可以自行查看 BoxDecoration 中可以設置的屬性decoration: BoxDecoration(color: Colors.white),// 設置 child 子組件居中方式, 居中放置alignment: Alignment.center,// 子組件, 子組件設置為一個 Column 組件child: Column(// Column 子組件, 這里設置 Text 文本組件children: <Widget>[Text("設置頁面選項卡")],),) , // 該設置與 _currentSelectedIndex == 0? 相對應, ?: 三目運算符),);}/// RefreshIndicator 發生下拉操作時, 回調該方法/// 該方啊是一個異步方法 , 在方法體前添加 async 關鍵字Future<Null> _refreshIndicatorOnRefresh() async{// 暫停 500 ms , 使用 await 關鍵字實現// 在這 500 ms 之間 , 列表處于刷新狀態// 500 ms 之后 , 列表變為非刷新狀態await Future.delayed(Duration(milliseconds: 500));return null;}}

運行效果展示 :

三、 相關資源

---

參考資料 :

• Flutter 官網 : https://flutter.dev/
• Flutter 開發文檔 : https://flutter.cn/docs ( 強烈推薦 )
• 官方 GitHub 地址 : https://github.com/flutter
• Flutter 中文社區 : https://flutter.cn/
• Flutter 實用教程 : https://flutter.cn/docs/cookbook
• Flutter CodeLab : https://codelabs.flutter-io.cn/
• Dart 中文文檔 : https://dart.cn/
• Dart 開發者官網 : https://api.dart.dev/
• Flutter 中文網 ( 非官方 , 翻譯的很好 ) : https://flutterchina.club/ , http://flutter.axuer.com/docs/
• Flutter 相關問題 : https://flutterchina.club/faq/ ( 入門階段推薦看一遍 )

博客源碼下載 :

• GitHub 地址 : https://github.com/han1202012/flutter_cmd ( 隨博客進度一直更新 , 有可能沒有本博客的源碼 )

• 博客源碼快照 : https://download.csdn.net/download/han1202012/15484718 ( 本篇博客的源碼快照 , 可以找到本博客的源碼 )

總結

以上是生活随笔為你收集整理的【Flutter】Flutter 布局组件 ( PhysicalModel 组件 )的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。