Android開發(fā)組件flutter的20個(gè)常用技巧示例總結(jié)
1.map遍歷快速實(shí)現(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( // 當(dāng)一行放不下時(shí)會(huì)自適應(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 添加邊距
在頁面的最外層組件中包裹一個(gè)SafeArea
SafeArea( // 實(shí)質(zhì)就是添加一個(gè)邊距,解決ios最外邊弧角導(dǎo)致的被遮擋 minimum: EdgeInsets.all(30), chird:... )
3.布局思路
1.堆疊:使用stack
2.豎直可滾動(dòng):listView
3.多格,超出自動(dòng)換行:wrap
4.獲取當(dāng)前屏幕的大小
Wrap( children: dataList .map((item) => Container( decoration: BoxDecoration(color: Colors.red), width: (MediaQuery.of(context).size.width - 10 * 3) / 2, // 適配屏幕一行放兩個(gè),并且三個(gè)縫隙間隔 )) .toList(), )
5.文本溢出顯示省略號(hào)
Text( data.title, maxLines: 1, overflow: TextOverflow.ellipsis, ),
6.一個(gè)圓角帶搜索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: "請(qǐng)輸入搜索詞", 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切換實(shí)例
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.點(diǎn)擊事件組件點(diǎn)擊空白區(qū)域不觸發(fā)點(diǎn)擊
GestureDetector( behavior: HitTestBehavior.translucent, // 加上即可
10.使用主題色
var buttonTextStyle = TextStyle( color: Theme.of(context).primaryColor, fontWeight: FontWeight.w600);
11.往安卓模擬器中傳圖片
往模擬器的sdcard目錄下的DCIM目錄里面丟圖片即可,然后點(diǎn)一下手機(jī)上的圖片應(yīng)用加載一下即可
12.控制text的最大行數(shù)顯示影藏文字
Text( data.subTitle ?? '暫無房屋概況', maxLines: showAllText ? null : 2, ),
13.去掉默認(rèn)的抽屜圖標(biāo)
給appbar添加此屬性即可
actions: [Container()], // 填一個(gè)空元素占位,可以填充掉默認(rèn)的抽屜圖標(biāo),此時(shí)通過左右滑動(dòng)打開對(duì)應(yīng)抽屜
14.圖片占滿屏
Container( decoration: BoxDecoration( image: DecorationImage( image: AssetImage('static/images/loading.jpg'), fit: BoxFit.fill)), );
15.倒計(jì)時(shí)
@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() { ///取消計(jì)時(shí)器 _timer.cancel(); super.dispose(); }
16.固定底部
1.當(dāng)內(nèi)容不會(huì)滾動(dòng)時(shí)可以直接在固定底部的組件上方加一個(gè)spacer組件即可。
2.當(dāng)內(nèi)容會(huì)滾動(dòng)時(shí)需要使用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 //陰影擴(kuò)散程度 ) ]),
18.隱藏鍵盤
// 關(guān)閉鍵盤 void _hideKeyboard() { FocusScopeNode currentFocus = FocusScope.of(context); if (!currentFocus.hasPrimaryFocus && currentFocus.focusedChild != null) { /// 取消焦點(diǎn),相當(dāng)于關(guān)閉鍵盤 FocusManager.instance.primaryFocus!.unfocus(); } } // 在頁面最外層包裹一個(gè)點(diǎn)擊事件 GestureDetector( onTap: _hideKeyboard, child: Scaffold(
19.獲取父級(jí)組件大小
在原來的build方法中返回組件外面套一層layoutBuilder即可
return LayoutBuilder(builder: (context, constrains) { var maxWidth = constrains.maxWidth; // 獲取父級(jí)容器大小 return Wrap() }
20.點(diǎn)擊事件主動(dòng)冒泡
GestureDetector組件會(huì)阻止事件冒泡,此時(shí)用Listenner組件替換即可
Listener( // 使用listener事件能夠繼續(xù)傳遞 onPointerDown: (event) { setState(() { isExpand = !isExpand; }); }, child: Text('點(diǎn)我'), ),
以上就是Android開發(fā)組件flutter的20個(gè)常用技巧示例總結(jié)的詳細(xì)內(nèi)容,更多關(guān)于Android開發(fā)組件flutte的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Android開發(fā)中計(jì)算器的sin、cos及tan值計(jì)算問題分析
這篇文章主要介紹了Android開發(fā)中計(jì)算器的sin、cos及tan值計(jì)算問題,結(jié)合實(shí)例形式分析了Android三角函數(shù)運(yùn)算中的弧度與角度計(jì)算問題與相關(guān)解決方法,需要的朋友可以參考下2017-11-11Android系統(tǒng)對(duì)話框使用詳解(最詳細(xì))
這篇文章主要介紹了Android系統(tǒng)對(duì)話框使用詳解(最詳細(xì)),需要的朋友可以參考下2017-10-10Android WebView與JS交互全面詳解(小結(jié))
本篇文章主要介紹了Android WebView與JS交互全面詳解(小結(jié)),實(shí)現(xiàn)了Android客戶端與Web網(wǎng)頁交互,具有一定的參考價(jià)值,有興趣的可以了解一下2017-11-11Android深入探究自定義View之嵌套滑動(dòng)的實(shí)現(xiàn)
什么是嵌套滑動(dòng)?當(dāng)我們向下滑動(dòng)時(shí),首先是外部的布局向下滑動(dòng),然后才是內(nèi)部的RecyclerView滑動(dòng),向上滑動(dòng)也是如此。這就是嵌套滑動(dòng)的效果2021-11-11Android自定View實(shí)現(xiàn)滑動(dòng)驗(yàn)證效果的代碼
這篇文章主要介紹了Android自定View實(shí)現(xiàn)滑動(dòng)驗(yàn)證效果,代碼分為自定義屬性代碼和自定義view代碼及使用方法,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2021-12-12Android Studio 下自動(dòng)注釋(自定義作者,類作用等)圖文詳解
android studio 下自動(dòng)注釋功能居然被隱藏了,很多功能都不見了,下面小編通過本文給大家分享Android Studio 下自動(dòng)注釋(自定義作者,類作用等)圖文詳解,需要的朋友參考下吧2017-11-11Flutter 日期時(shí)間DatePicker控件及國際化
這篇文章主要介紹了Flutter 日期時(shí)間DatePicker控件及國際化,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03一文帶你了解Android系統(tǒng)的啟動(dòng)流程
Android系統(tǒng)的啟動(dòng)是一個(gè)復(fù)雜的過程,涉及到多個(gè)階段和組件,所以本文將給大家詳細(xì)的介紹一下Android系統(tǒng)的啟動(dòng)流程,文中也有圖片和代碼示例的講解,需要的朋友可以參考下2023-09-09Kotlin作用域函數(shù)應(yīng)用詳細(xì)介紹
作用域函數(shù):是Kotlin標(biāo)準(zhǔn)庫中的內(nèi)聯(lián)函數(shù),作用在對(duì)象上時(shí),執(zhí)行給定的block代碼塊??梢栽赽lock代碼塊中通過it,this代表當(dāng)前對(duì)象,進(jìn)行代碼邏輯處理2022-08-08Android 開發(fā)之Dialog,Toast,Snackbar提醒
這篇文章主要介紹了Android 開發(fā)之Dialog,Toast,Snackbar提醒的相關(guān)資料,需要的朋友可以參考下2017-03-03