时间:2021-05-20
本文实例为大家分享了flutter Container容器实现圆角边框的具体代码,供大家参考,具体内容如下
在这里使用 Container 容器来实现圆角矩形边框效果
1 圆角矩形边框
Container(margin: EdgeInsets.only(left: 40, top: 40),//设置 child 居中alignment: Alignment(0, 0), height: 50,width: 300,//边框设置decoration: new BoxDecoration(//背景 color: Colors.white, //设置四周圆角 角度 borderRadius: BorderRadius.all(Radius.circular(4.0)), //设置四周边框border: new Border.all(width: 1, color: Colors.red),),child: Text("Container 的圆角边框"), ),2 圆角矩形边框
Container(margin: EdgeInsets.only(left: 40, top: 40),//设置 child 居中alignment: Alignment(0, 0),height: 50,width: 300,//边框设置decoration: new BoxDecoration(//背景color: Colors.white, //设置四周圆角 角度 这里的角度应该为 父Container height 的一半 borderRadius: BorderRadius.all(Radius.circular(25.0)), //设置四周边框border: new Border.all(width: 1, color: Colors.red), ), child: Text("Container 的圆角边框"), ),3 可点击的圆角矩形边框
使用 InkWell 来实现 ,更多关于 InkWell 可查看 flutter InkWell 设置水波纹点击效果详述
Container( margin: EdgeInsets.only(left: 40, top: 40), child: new Material( //INK可以实现装饰容器 child: new Ink( //用ink圆角矩形 // color: Colors.red, decoration: new BoxDecoration( //背景 color: Colors.white, //设置四周圆角 角度 borderRadius: BorderRadius.all(Radius.circular(25.0)), //设置四周边框 border: new Border.all(width: 1, color: Colors.red), ), child: new InkWell( //圆角设置,给水波纹也设置同样的圆角 //如果这里不设置就会出现矩形的水波纹效果 borderRadius: new BorderRadius.circular(25.0), //设置点击事件回调 onTap: () {}, child: Container( //设置 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( //设置背景 decoration: new BoxDecoration( //背景 color: Colors.white, //设置四周圆角 角度 borderRadius: BorderRadius.all(Radius.circular(25.0)), //设置四周边框 border: new Border.all(width: 1, color: Colors.red), ), child: new InkResponse( borderRadius: new BorderRadius.all(new Radius.circular(25.0)), //点击或者toch控件高亮时显示的控件在控件上层,水波纹下层// highlightColor: Colors.deepPurple, //点击或者toch控件高亮的shape形状 highlightShape: BoxShape.rectangle, //.InkResponse内部的radius这个需要注意的是,我们需要半径大于控件的宽,如果radius过小,显示的水波纹就是一个很小的圆, //水波纹的半径 radius: 300.0, //水波纹的颜色 splashColor: Colors.yellow, //true表示要剪裁水波纹响应的界面 false不剪裁 如果控件是圆角不剪裁的话水波纹是矩形 containedInkWell: true, //点击事件 onTap: () { print("click"); }, child: Container( //设置 child 居中 alignment: Alignment(0, 0), height: 50, width: 300, child: Text("点击 Container 圆角边框"), ), ), ), ), ),以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了Android编程实现圆角边框的方法。分享给大家供大家参考,具体如下:设置边框圆角可以在drawable-mdpi目录里定义一个xml:解释:so
CSS全局样式1、布局容器类样式:.container和.container-fluid.container固定宽度并且具有响应式。.container-flu
IOSxib布局小技巧-边框设置在xib或storyboard中为UIView添加边框或圆角view的圆角半径(cornerRadius)和边框宽度可以在右侧标
本文实例讲述了thinkphp5.1框架中容器(Container)和门面(Facade)的实现方法。分享给大家供大家参考,具体如下:tp5.1中引入了容器(C
带边框的固定宽度圆角框。单色圆角框只能使用一种颜色,而且无边框。而第二种常用的圆角框便是带边框的固定宽度圆角框。这种类型的圆角框与第一种适用性基本相同,但比它更