Flutter入門（四）

時間  2021-01-10
標籤 java 微信 app less ide this spa .net code 欄目 Java 简体版
原文   原文鏈接

* TabBar（頂部導航）java

import 'package:flutter/material.dart';
class CategoryPage extends StatefulWidget { CategoryPage({Key key}) : super(key: key);
 @override _CategoryPageState createState() => _CategoryPageState();}
class _CategoryPageState extends State<CategoryPage> { @override Widget build(BuildContext context) { return DefaultTabController( length: 8, child: Scaffold( appBar: AppBar( backgroundColor: Colors.black12, title: Row( children: <Widget>[ Expanded( child: TabBar( indicatorColor: Colors.red, labelColor: Colors.black, unselectedLabelColor: Colors.white, isScrollable: true, tabs: <Widget>[ Tab(text: "熱銷"), Tab(text: "推薦"), Tab(text: "社羣"), Tab(text: "推廣"), Tab(text: "新聞"), Tab(text: "熱點"), Tab(text: "淘寶"), Tab(text: "知乎"), ], ), ) ], ), ), body: TabBarView( children: <Widget>[ Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ RaisedButton( child: Text("跳轉到表單頁面並傳值"), onPressed: () { //普通路由的寫法 // Navigator.of(context) // .push(MaterialPageRoute(builder: (context) => FormPage(title: "我是跳轉傳值",))); //命名路由的寫法 Navigator.pushNamed(context, '/form'); }, color: Theme.of(context).accentColor, textTheme: ButtonTextTheme.primary, ), ], ), Text("第三個tab"), Text("第四個tab"), Text("第五個tab"), Text("第六個tab"), Text("第七個tab"), Text("第八個tab"), Text("第九個tab"), ], ), ), ); }}

效果圖：微信


* 自定義TabController（上面的是默認TabController）app

自定義的好處是能夠在addListener中增長監聽，經過setState修改狀態less

import 'package:flutter/material.dart';
class TabBarControllerPage extends StatefulWidget { TabBarControllerPage({Key key}) : super(key: key);
 @override _TabBarControllerPageState createState() => _TabBarControllerPageState();}
class _TabBarControllerPageState extends State<TabBarControllerPage> with SingleTickerProviderStateMixin { TabController _tabController; @override void dispose() { super.dispose(); _tabController.dispose(); }
 @override void initState() { super.initState(); _tabController = new TabController( vsync: this, length: 2, ); _tabController.addListener(() { print(_tabController.index); }); }
 @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("TabBarControllerPage"), bottom: TabBar( controller: this._tabController, tabs: <Widget>[ Tab(text: "熱銷"), Tab(text: "推薦"), ], ), ), body: TabBarView( controller: this._tabController, children: <Widget>[ Center(child: Text("熱銷")), Center(child: Text("推薦")), ], ), ); }}


* Drawer（側邊欄）ide

import 'package:flutter/material.dart';import 'tabs/Home.dart';import 'tabs/Category.dart';import 'tabs/Setting.dart';
class Tabs extends StatefulWidget { final int index; Tabs({Key key, this.index = 0}) : super(key: key);
 @override _TabsState createState() => _TabsState(index);}
class _TabsState extends State<Tabs> { int _currentIndex; _TabsState(index) { this._currentIndex = index; } List _pageList = [HomePage(), CategoryPage(), SettingPage()]; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Flutter Demo'), ), body: this._pageList[this._currentIndex], bottomNavigationBar: BottomNavigationBar( currentIndex: this._currentIndex, onTap: (int index) { setState(() { this._currentIndex = index; }); }, // type: BottomNavigationBarType.fixed,//能夠配置超過4個以上的icon items: [ BottomNavigationBarItem( icon: Icon(Icons.home), title: Text("首頁"), ), BottomNavigationBarItem( icon: Icon(Icons.category), title: Text("分類"), ), BottomNavigationBarItem( icon: Icon(Icons.settings), title: Text("設置"), ), ], ), //左側邊欄 drawer: Drawer( child: Column( children: <Widget>[ //頭部 Row( children: <Widget>[ Expanded( child: DrawerHeader( child: Text("你好Flutter"), decoration: BoxDecoration( image: DecorationImage( image: NetworkImage( "https://www.itying.com/images/flutter/2.png"), fit: BoxFit.cover)), ), ) ], ), ListTile( leading: CircleAvatar( child: Icon(Icons.home), ), title: Text("個人空間"), ), Divider(), ListTile( leading: CircleAvatar( child: Icon(Icons.people), ), title: Text("用戶中心"), ), Divider(), ListTile( leading: CircleAvatar( child: Icon(Icons.settings), ), title: Text("設置中心"), ), Divider(), ], ), ), //右側邊欄 endDrawer: Drawer( child: Text("右側側邊欄"), ), ); }}

效果圖ui


* UserAccountsDrawerHeader （用戶信息側邊欄）this

import 'package:flutter/material.dart';import 'tabs/Home.dart';import 'tabs/Category.dart';import 'tabs/Setting.dart';
class Tabs extends StatefulWidget { final int index; Tabs({Key key, this.index = 0}) : super(key: key);
 @override _TabsState createState() => _TabsState(index);}
class _TabsState extends State<Tabs> { int _currentIndex; _TabsState(index) { this._currentIndex = index; } List _pageList = [HomePage(), CategoryPage(), SettingPage()]; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Flutter Demo'), ), body: this._pageList[this._currentIndex], bottomNavigationBar: BottomNavigationBar( currentIndex: this._currentIndex, onTap: (int index) { setState(() { this._currentIndex = index; }); }, // type: BottomNavigationBarType.fixed,//能夠配置超過4個以上的icon items: [ BottomNavigationBarItem( icon: Icon(Icons.home), title: Text("首頁"), ), BottomNavigationBarItem( icon: Icon(Icons.category), title: Text("分類"), ), BottomNavigationBarItem( icon: Icon(Icons.settings), title: Text("設置"), ), ], ), //左側邊欄 drawer: Drawer( child: Column( children: <Widget>[ //頭部 Row( children: <Widget>[ Expanded( child: UserAccountsDrawerHeader( accountName: Text("用戶King"), accountEmail: Text("xxxxx.@qq.com"), currentAccountPicture: CircleAvatar( backgroundImage: NetworkImage( "https://www.itying.com/images/flutter/3.png"), ), decoration: BoxDecoration( image: DecorationImage( image: NetworkImage( "https://www.itying.com/images/flutter/2.png"), fit: BoxFit.cover), ), otherAccountsPictures: <Widget>[ Image.network( "https://www.itying.com/images/flutter/4.png"), Image.network( "https://www.itying.com/images/flutter/5.png"), ], ), ) ], ), ListTile( leading: CircleAvatar( child: Icon(Icons.home), ), title: Text("個人空間"), ), Divider(), ListTile( leading: CircleAvatar( child: Icon(Icons.people), ), title: Text("用戶中心"), onTap: () { Navigator.of(context).pop(); //隱藏側邊欄 Navigator.pushNamed(context, '/user'); }, ), Divider(), ListTile( leading: CircleAvatar( child: Icon(Icons.settings), ), title: Text("設置中心"), ), Divider(), ], ), ), //右側邊欄 endDrawer: Drawer( child: Text("右側側邊欄"), ), ); }}

效果圖spa


* 各類按鈕.net

import 'package:flutter/material.dart';
class ButtonPage extends StatelessWidget { const ButtonPage({Key key}) : super(key: key);
 @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("按鈕頁面"), ), body: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ RaisedButton( child: Text("普通按鈕"), onPressed: () { print("普通按鈕"); }, ), SizedBox(width: 10), RaisedButton( child: Text("有顏色按鈕"), color: Colors.blue, textColor: Colors.white, onPressed: () { print("有顏色按鈕"); }, ), SizedBox(width: 10), RaisedButton( child: Text("有陰影按鈕"), color: Colors.blue, textColor: Colors.white, elevation: 20, onPressed: () { print("有陰影按鈕"); }, ), ], ), SizedBox(height: 10), Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ RaisedButton.icon( icon: Icon(Icons.search), label: Text("圖標按鈕"), color: Colors.blue, textColor: Colors.white, onPressed: () { print("按鈕圖標"); }, ), SizedBox(width: 10), RaisedButton( child: Text("圓角按鈕"), color: Colors.blue, textColor: Colors.white, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(10)), onPressed: () { print("圓角按鈕"); }, ), SizedBox(width: 10), Container( height: 80, child: RaisedButton( child: Text("圓型按鈕"), color: Colors.blue, textColor: Colors.white, splashColor: Colors.yellow, shape: CircleBorder( side: BorderSide( color: Colors.white, )), onPressed: () { print("圓型按鈕"); }, ), ), ], ), SizedBox(height: 10), Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Container( width: 300, height: 50, child: RaisedButton( child: Text("寬度按鈕"), color: Colors.blue, textColor: Colors.white, splashColor: Colors.yellow, onPressed: () { print("寬度按鈕"); }, ), ), ], ), SizedBox(height: 10), Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Expanded( child: Container( height: 50, margin: EdgeInsets.all(10), child: RaisedButton( child: Text("自適應屏幕寬度按鈕"), color: Colors.blue, textColor: Colors.white, onPressed: () { print("自適應屏幕寬度按鈕"); }, ), ), ) ], ), SizedBox(height: 10), FlatButton( child: Text("flatbutton"), color: Colors.blue, textColor: Colors.yellow, onPressed: () { print("flatbutton"); }, ), SizedBox(height: 10), //無背景色效果 OutlineButton( child: Text("OutlineButton"), color: Colors.blue, //沒有效果 textColor: Colors.blue, onPressed: () { print("OutlineButton"); }, ), Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ //按鈕組 ButtonBar( children: <Widget>[ RaisedButton( child: Text("按鈕1"), onPressed: () { print("按鈕1"); }, ), RaisedButton( child: Text("按鈕2"), onPressed: () { print("按鈕2"); }, ), MyButton( text: "自定義按鈕", pressed: () { print("自定義按鈕"); }, ) ], ) ], ) ], ), ); }}
//自定義按鈕組件class MyButton extends StatelessWidget { final text; final pressed; const MyButton({this.text = '', this.pressed = null});
 @override Widget build(BuildContext context) { return Container( height: 50, width: 120, child: RaisedButton( child: Text(this.text), onPressed: this.pressed, ), ); }}

效果圖code


* 相似閒魚app底部導航

import 'package:flutter/material.dart';import 'tabs/Home.dart';import 'tabs/Category.dart';import 'tabs/Setting.dart';
class Tabs2 extends StatefulWidget { final index; Tabs2({Key key, this.index = 0}) : super(key: key);
 _TabsState createState() => _TabsState(this.index);}
class _TabsState extends State<Tabs2> { int _currentIndex; _TabsState(index) { this._currentIndex = index; }
 List _pageList = [ HomePage(), CategoryPage(), SettingPage(), ]; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Flutter App"), ), floatingActionButton: Container( height: 80, width: 80, padding: EdgeInsets.all(8), margin: EdgeInsets.only(top: 10), decoration: BoxDecoration( borderRadius: BorderRadius.circular(40), color: Colors.white, ), child: FloatingActionButton( child: Icon(Icons.add), onPressed: () { setState(() { //改變狀態 this._currentIndex = 2; }); }, backgroundColor: this._currentIndex == 2 ? Colors.red : Colors.yellow, ), ), floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, body: this._pageList[this._currentIndex], bottomNavigationBar: BottomNavigationBar( currentIndex: this._currentIndex, //配置對應的索引值選中 onTap: (int index) { setState(() { //改變狀態 this._currentIndex = index; }); }, iconSize: 36.0, //icon的大小 fixedColor: Colors.red, //選中的顏色 type: BottomNavigationBarType.fixed, //配置底部tabs能夠有多個按鈕 items: [ BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("首頁")), BottomNavigationBarItem(icon: Icon(Icons.message), title: Text("消息")), BottomNavigationBarItem( icon: Icon(Icons.category), title: Text("分類")), BottomNavigationBarItem(icon: Icon(Icons.settings), title: Text("設置")), BottomNavigationBarItem(icon: Icon(Icons.card_giftcard), title: Text("分享")) ], ), drawer: Drawer( child: Column( children: <Widget>[ Row( children: <Widget>[ Expanded( child: UserAccountsDrawerHeader( accountName: Text("大地老師"), accountEmail: Text("dadi@itying.com"), currentAccountPicture: CircleAvatar( backgroundImage: NetworkImage( "https://www.itying.com/images/flutter/3.png"), ), decoration: BoxDecoration( image: DecorationImage( image: NetworkImage( "https://www.itying.com/images/flutter/2.png"), fit: BoxFit.cover, )), otherAccountsPictures: <Widget>[ Image.network( "https://www.itying.com/images/flutter/4.png"), Image.network( "https://www.itying.com/images/flutter/5.png"), ], )) ], ), ListTile( leading: CircleAvatar(child: Icon(Icons.home)), title: Text("個人空間"), ), Divider(), ListTile( leading: CircleAvatar(child: Icon(Icons.people)), title: Text("用戶中心"), onTap: () { Navigator.of(context).pop(); //隱藏側邊欄 Navigator.pushNamed(context, '/user'); }, ), Divider(), ListTile( leading: CircleAvatar(child: Icon(Icons.settings)), title: Text("設置中心"), ), Divider(), ], ), ), endDrawer: Drawer( child: Text('右側側邊欄'), ), ); }}

效果圖

歡迎關注個人微信公衆號：安卓圈

本文分享自微信公衆號 - 安卓圈（gh_df75572d44e4）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程