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