flutter Container容器實(shí)現(xiàn)圓角邊框
本文實(shí)例為大家分享了flutter Container容器實(shí)現(xiàn)圓角邊框的具體代碼,供大家參考,具體內(nèi)容如下
在這里使用 Container 容器來(lái)實(shí)現(xiàn)圓角矩形邊框效果
1 圓角矩形邊框
Container( margin: EdgeInsets.only(left: 40, top: 40), //設(shè)置 child 居中 alignment: Alignment(0, 0), height: 50, width: 300, //邊框設(shè)置 decoration: new BoxDecoration( //背景 color: Colors.white, //設(shè)置四周圓角 角度 borderRadius: BorderRadius.all(Radius.circular(4.0)), //設(shè)置四周邊框 border: new Border.all(width: 1, color: Colors.red), ), child: Text("Container 的圓角邊框"), ),
2 圓角矩形邊框
Container( margin: EdgeInsets.only(left: 40, top: 40), //設(shè)置 child 居中 alignment: Alignment(0, 0), height: 50, width: 300, //邊框設(shè)置 decoration: new BoxDecoration( //背景 color: Colors.white, //設(shè)置四周圓角 角度 這里的角度應(yīng)該為 父Container height 的一半 borderRadius: BorderRadius.all(Radius.circular(25.0)), //設(shè)置四周邊框 border: new Border.all(width: 1, color: Colors.red), ), child: Text("Container 的圓角邊框"), ),
3 可點(diǎn)擊的圓角矩形邊框
使用 InkWell 來(lái)實(shí)現(xiàn) ,更多關(guān)于 InkWell 可查看 flutter InkWell 設(shè)置水波紋點(diǎn)擊效果詳述
Container( margin: EdgeInsets.only(left: 40, top: 40), child: new Material( //INK可以實(shí)現(xiàn)裝飾容器 child: new Ink( //用ink圓角矩形 // color: Colors.red, decoration: new BoxDecoration( //背景 color: Colors.white, //設(shè)置四周圓角 角度 borderRadius: BorderRadius.all(Radius.circular(25.0)), //設(shè)置四周邊框 border: new Border.all(width: 1, color: Colors.red), ), child: new InkWell( //圓角設(shè)置,給水波紋也設(shè)置同樣的圓角 //如果這里不設(shè)置就會(huì)出現(xiàn)矩形的水波紋效果 borderRadius: new BorderRadius.circular(25.0), //設(shè)置點(diǎn)擊事件回調(diào) onTap: () {}, child: Container( //設(shè)置 child 居中 alignment: Alignment(0, 0), height: 50, width: 300, child: Text("點(diǎn)擊 Container 圓角邊框"), )), ), ), ),
4 可點(diǎn)擊的圓角矩形邊框
Container( margin: EdgeInsets.only(left: 40, top: 40), child: new Material( child: new Ink( //設(shè)置背景 decoration: new BoxDecoration( //背景 color: Colors.white, //設(shè)置四周圓角 角度 borderRadius: BorderRadius.all(Radius.circular(25.0)), //設(shè)置四周邊框 border: new Border.all(width: 1, color: Colors.red), ), child: new InkResponse( borderRadius: new BorderRadius.all(new Radius.circular(25.0)), //點(diǎn)擊或者toch控件高亮?xí)r顯示的控件在控件上層,水波紋下層 // highlightColor: Colors.deepPurple, //點(diǎn)擊或者toch控件高亮的shape形狀 highlightShape: BoxShape.rectangle, //.InkResponse內(nèi)部的radius這個(gè)需要注意的是,我們需要半徑大于控件的寬,如果radius過小,顯示的水波紋就是一個(gè)很小的圓, //水波紋的半徑 radius: 300.0, //水波紋的顏色 splashColor: Colors.yellow, //true表示要剪裁水波紋響應(yīng)的界面 false不剪裁 如果控件是圓角不剪裁的話水波紋是矩形 containedInkWell: true, //點(diǎn)擊事件 onTap: () { print("click"); }, child: Container( //設(shè)置 child 居中 alignment: Alignment(0, 0), height: 50, width: 300, child: Text("點(diǎn)擊 Container 圓角邊框"), ), ), ), ), ),
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android WebView實(shí)現(xiàn)截長(zhǎng)圖功能
這篇文章主要為大家詳細(xì)介紹了Android截長(zhǎng)圖的一種實(shí)現(xiàn)方式,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-05-05Android App中使用ListFragment的實(shí)例教程
這篇文章主要介紹了Android App中使用ListFragment的實(shí)例教程,ListFragment的內(nèi)容是以列表(list)的形式顯示的Fragment,需要的朋友可以參考下2016-05-05Android activity實(shí)現(xiàn)延時(shí)跳轉(zhuǎn)功能
Activity是一個(gè)Android的應(yīng)用組件,它提供屏幕進(jìn)行交互。今天通過本文給大家介紹Android activity實(shí)現(xiàn)延時(shí)跳轉(zhuǎn)功能,感興趣的朋友一起看看吧2021-06-06Android 解決WebView多進(jìn)程崩潰的方法
這篇文章主要介紹了Android 解決WebView多進(jìn)程崩潰的方法,幫助大家更好的理解和學(xué)習(xí)使用Android開發(fā),感興趣的朋友可以了解下2021-03-03Android Studio 3.0 原生支持kotlin 例子詳解
這篇文章主要介紹了 Android Studio 3.0 原生支持kotlin 例子詳解,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-05-05Android自定義View實(shí)現(xiàn)粉碎的面具效果
這篇文章主要給大家介紹了關(guān)于Android自定義View實(shí)現(xiàn)粉碎的面具效果的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)各位Android開發(fā)者們具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-08-08Android編程記錄ListView標(biāo)記行狀態(tài)的方法
這篇文章主要介紹了Android編程記錄ListView標(biāo)記行狀態(tài)的方法,結(jié)合實(shí)例分析了ListView標(biāo)記的相關(guān)實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11Android開發(fā)實(shí)現(xiàn)SubMenu選項(xiàng)菜單和子菜單示例
這篇文章主要介紹了Android開發(fā)實(shí)現(xiàn)SubMenu選項(xiàng)菜單和子菜單,結(jié)合實(shí)例形式分析了Android開發(fā)中SubMenu選項(xiàng)菜單和子菜單的功能、配置、布局等相關(guān)操作技巧,需要的朋友可以參考下2019-03-03