Android開發(fā)組件flutter的20個常用技巧示例總結(jié)
1.map遍歷快速實現(xiàn)邊距,文字自適應(yīng)改變大小
Container( // padding: EdgeInsets.symmetric(horizontal: 50), // constraints: BoxConstraints.tightFor(width: 200.0, height: 150.0), color: Colors.white, child: Align( alignment: Alignment.center, child: FittedBox( // 當一行放不下時會自適應(yīng)調(diào)整組件大小 child: Row( children: [ ElevatedButton(onPressed: () => {}, child: Text("電塔")), ElevatedButton(onPressed: () => {}, child: Text("嘿嘿")), ElevatedButton(onPressed: () => {}, child: Text("喲西")), ElevatedButton(onPressed: () => {}, child: Text("是蠶絲")), ] .map((e) => Padding( // 遍歷設(shè)置組件左內(nèi)邊距 padding: EdgeInsets.only(left: 30), child: e)) .toList()), ), ));
2.使用SafeArea 添加邊距
在頁面的最外層組件中包裹一個SafeArea
SafeArea( // 實質(zhì)就是添加一個邊距,解決ios最外邊弧角導致的被遮擋 minimum: EdgeInsets.all(30), chird:... )
3.布局思路
1.堆疊:使用stack
2.豎直可滾動:listView
3.多格,超出自動換行:wrap
4.獲取當前屏幕的大小
Wrap( children: dataList .map((item) => Container( decoration: BoxDecoration(color: Colors.red), width: (MediaQuery.of(context).size.width - 10 * 3) / 2, // 適配屏幕一行放兩個,并且三個縫隙間隔 )) .toList(), )
5.文本溢出顯示省略號
Text( data.title, maxLines: 1, overflow: TextOverflow.ellipsis, ),
6.一個圓角帶搜索icon的搜索框案例
Expanded( child: Container( height: 34, decoration: BoxDecoration( color: Colors.grey[200], borderRadius: BorderRadius.circular(17)), margin: const EdgeInsets.only(right: 10), child: const TextField( decoration: InputDecoration( hintText: "請輸入搜索詞", hintStyle: TextStyle(color: Colors.grey, fontSize: 14), contentPadding: EdgeInsets.only(top: 1, left: -10), border: InputBorder.none, icon: Padding( padding: EdgeInsets.only(left: 10, top: 5), child: Icon( Icons.search, size: 18, color: Colors.grey, )), suffixIcon: Icon( Icons.close, size: 18, ))), )),
7.修改按鈕的背景色
ElevatedButton( onPressed: () { CommonToast.showToast("退出登錄"); }, style: ButtonStyle( backgroundColor: MaterialStateProperty.all<Color>(Colors.red), ), child: const Text( '退出登錄', style: TextStyle(color: Colors.white), ) ), TextButton( style: TextButton.styleFrom(primary: Colors.green), )
8.tab切換實例
import 'package:flutter/material.dart'; import 'package:hook_up_rent/pages/home/tab_search/data_list.dart'; import 'package:hook_up_rent/widgets/room_list_item_widget.dart'; class RoomManagePage extends StatelessWidget { const RoomManagePage({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return DefaultTabController( length: 2, initialIndex: 0, child: Scaffold( appBar: AppBar( title: Text("房屋管理"), centerTitle: true, bottom: TabBar( tabs: [ Tab( text: "空置", ), Tab( text: "已租", ) ], ), ), body: TabBarView( children: [ ListView( children: dataList.map((item) => RoomListItemWidget(item)).toList(), ), ListView( children: dataList.map((item) => RoomListItemWidget(item)).toList(), ) ], ), )); } }
9.點擊事件組件點擊空白區(qū)域不觸發(fā)點擊
GestureDetector( behavior: HitTestBehavior.translucent, // 加上即可
10.使用主題色
var buttonTextStyle = TextStyle( color: Theme.of(context).primaryColor, fontWeight: FontWeight.w600);
11.往安卓模擬器中傳圖片
往模擬器的sdcard目錄下的DCIM目錄里面丟圖片即可,然后點一下手機上的圖片應(yīng)用加載一下即可
12.控制text的最大行數(shù)顯示影藏文字
Text( data.subTitle ?? '暫無房屋概況', maxLines: showAllText ? null : 2, ),
13.去掉默認的抽屜圖標
給appbar添加此屬性即可
actions: [Container()], // 填一個空元素占位,可以填充掉默認的抽屜圖標,此時通過左右滑動打開對應(yīng)抽屜
14.圖片占滿屏
Container( decoration: BoxDecoration( image: DecorationImage( image: AssetImage('static/images/loading.jpg'), fit: BoxFit.fill)), );
15.倒計時
@override void initState() { super.initState(); ///循環(huán)執(zhí)行 ///間隔1秒 _timer = Timer.periodic(Duration(milliseconds: 1000), (timer) { ///自增 curentTimer++; ///到5秒后停止 if (curentTimer == 5) { _timer.cancel(); } setState(() {}); }); } @override void dispose() { ///取消計時器 _timer.cancel(); super.dispose(); }
16.固定底部
1.當內(nèi)容不會滾動時可以直接在固定底部的組件上方加一個spacer組件即可。
2.當內(nèi)容會滾動時需要使用epanded,且該組件只能放置在row、column等組件【不能放在listview,container,stack…】如下所示:
17.添加陰影
// 直接給Container加上如下屬性即可 decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(8.0), boxShadow: [ BoxShadow( color: Colors.black12, offset: Offset(0.0, 15.0), //陰影xy軸偏移量 blurRadius: 15.0, //陰影模糊程度 spreadRadius: 1.0 //陰影擴散程度 ) ]),
18.隱藏鍵盤
// 關(guān)閉鍵盤 void _hideKeyboard() { FocusScopeNode currentFocus = FocusScope.of(context); if (!currentFocus.hasPrimaryFocus && currentFocus.focusedChild != null) { /// 取消焦點,相當于關(guān)閉鍵盤 FocusManager.instance.primaryFocus!.unfocus(); } } // 在頁面最外層包裹一個點擊事件 GestureDetector( onTap: _hideKeyboard, child: Scaffold(
19.獲取父級組件大小
在原來的build方法中返回組件外面套一層layoutBuilder即可
return LayoutBuilder(builder: (context, constrains) { var maxWidth = constrains.maxWidth; // 獲取父級容器大小 return Wrap() }
20.點擊事件主動冒泡
GestureDetector組件會阻止事件冒泡,此時用Listenner組件替換即可
Listener( // 使用listener事件能夠繼續(xù)傳遞 onPointerDown: (event) { setState(() { isExpand = !isExpand; }); }, child: Text('點我'), ),
以上就是Android開發(fā)組件flutter的20個常用技巧示例總結(jié)的詳細內(nèi)容,更多關(guān)于Android開發(fā)組件flutte的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Android開發(fā)中計算器的sin、cos及tan值計算問題分析
這篇文章主要介紹了Android開發(fā)中計算器的sin、cos及tan值計算問題,結(jié)合實例形式分析了Android三角函數(shù)運算中的弧度與角度計算問題與相關(guān)解決方法,需要的朋友可以參考下2017-11-11Android WebView與JS交互全面詳解(小結(jié))
本篇文章主要介紹了Android WebView與JS交互全面詳解(小結(jié)),實現(xiàn)了Android客戶端與Web網(wǎng)頁交互,具有一定的參考價值,有興趣的可以了解一下2017-11-11Android深入探究自定義View之嵌套滑動的實現(xiàn)
什么是嵌套滑動?當我們向下滑動時,首先是外部的布局向下滑動,然后才是內(nèi)部的RecyclerView滑動,向上滑動也是如此。這就是嵌套滑動的效果2021-11-11Android自定View實現(xiàn)滑動驗證效果的代碼
這篇文章主要介紹了Android自定View實現(xiàn)滑動驗證效果,代碼分為自定義屬性代碼和自定義view代碼及使用方法,本文給大家介紹的非常詳細,需要的朋友可以參考下2021-12-12Android Studio 下自動注釋(自定義作者,類作用等)圖文詳解
android studio 下自動注釋功能居然被隱藏了,很多功能都不見了,下面小編通過本文給大家分享Android Studio 下自動注釋(自定義作者,類作用等)圖文詳解,需要的朋友參考下吧2017-11-11Android 開發(fā)之Dialog,Toast,Snackbar提醒
這篇文章主要介紹了Android 開發(fā)之Dialog,Toast,Snackbar提醒的相關(guān)資料,需要的朋友可以參考下2017-03-03