文章目錄

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

一、PageView 組件

---

PageView 組件構造函數 : 構造函數中的可選參數就是 PageView 組件的所有可設置選項 ;

class PageView extends StatefulWidget {PageView({Key key,this.scrollDirection = Axis.horizontal,this.reverse = false,PageController controller,this.physics,this.pageSnapping = true,this.onPageChanged,List<Widget> children = const <Widget>[],this.dragStartBehavior = DragStartBehavior.start,this.allowImplicitScrolling = false,this.restorationId,this.clipBehavior = Clip.hardEdge,}) : assert(allowImplicitScrolling != null),assert(clipBehavior != null),controller = controller ?? _defaultPageController,childrenDelegate = SliverChildListDelegate(children),super(key: key); }

PageView 組件 children 設置 : children 字段設置其要滑動切換的各個頁面組件 ; 一般使用 Container 封裝復雜的組件 ;

代碼示例 : 下面的代碼就是 PageView 中設置了三個滑動切換的組件 , 都是 Container 組件 , 每個 Container 都設置的居中方式 , 裝飾器 , 顯示的子組件 Text ;

// 設置一個布局容器 , 用于封裝 PageView 組件Container(// 設置高度height: 200,// 設置邊距margin: EdgeInsets.only(top: 10),// 設置裝飾, 背景深橙色decoration: BoxDecoration(color: Colors.deepOrange),// 設置子組件 PageViewchild: 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),),),],),),

二、PageView 組件完整代碼示例

---

完整代碼示例 :

import 'package:flutter/material.dart';class StatefulWidgetPage extends StatefulWidget {@override_StatefulWidgetPageState createState() => _StatefulWidgetPageState(); }class _StatefulWidgetPageState extends State<StatefulWidgetPage> {/// 當前被選中的底部導航欄索引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: 'StatefulWidgetPage 組件示例',theme: ThemeData(primarySwatch: Colors.blue,),home: Scaffold(// 頂部標題欄appBar: AppBar(title: Text('StatefulWidgetPage 組件示例'),),// 底部導航欄 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("主頁面選項卡, 下拉刷新"),// 圖片組件 , 從網絡中加載一張圖片Image.network(// 圖片地址"https://img-blog.csdnimg.cn/20210228180808133.png",// 圖片寬度width: 200,// 圖片高度height: 200,),// 輸入框組件TextField(// 設置輸入框樣式decoration: InputDecoration(// 設置內容邊距, 左右邊距為 10, 上下邊距為 0contentPadding: EdgeInsets.fromLTRB(10, 0, 10, 0),// 設置的提示文案信息hintText: "提示信息",// 設置提示文案樣式hintStyle: TextStyle(fontSize: 20, color: Colors.grey),),),// 設置一個布局容器 , 用于封裝 PageView 組件Container(// 設置高度height: 200,// 設置邊距margin: EdgeInsets.only(top: 10),// 設置裝飾, 背景深橙色decoration: BoxDecoration(color: Colors.deepOrange),// 設置子組件 PageViewchild: 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/15500147 ( 本篇博客的源碼快照 , 可以找到本博客的源碼 )

總結

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

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