flutter Container容器实现圆角边框
程序员文章站
2022-04-09 13:42:58
本文实例为大家分享了flutter container容器实现圆角边框的具体代码,供大家参考,具体内容如下
在这里使用 container 容器来实现圆角矩形边框效果...
本文实例为大家分享了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 圆角边框"), ), ), ), ), ),
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。