本文实例为大家分享了颤振集装箱容器实现圆角边框的具体代码,供大家参考,具体内容如下
在这里使用集装箱容器来实现圆角矩形边框效果
<强> 1圆角矩形边框
容器(
保证金:EdgeInsets。只有(左:40岁前:40)//设置孩子居中
对齐:对齐(0,0),
高度:50,
宽度:300年,//边框设置
装饰:新BoxDecoration (//背景
颜色:Colors.white,//设置四周圆角角度
borderRadius: BorderRadius.all (Radius.circular (4.0)),//设置四周边框
边界:新的边界。所有(宽度:1、颜色:Colors.red),
),
孩子:文本(“容器的圆角边框”),
),
<强> 2圆角矩形边框
容器(
保证金:EdgeInsets。只有(左:40岁前:40)//设置孩子居中
对齐:对齐(0,0),
高度:50,
宽度:300年,//边框设置
装饰:新BoxDecoration (//背景
颜色:Colors.white,//设置四周圆角角度这里的角度应该为父容器高度的一半
borderRadius: BorderRadius.all (Radius.circular (25.0)),//设置四周边框
边界:新的边界。所有(宽度:1、颜色:Colors.red),
),
孩子:文本(“容器的圆角边框”),
),
<强> 3可点击的圆角矩形边框
使用墨水池来实现,更多关于墨水池可查看浅墨水池设置水波纹点击效果详述
容器(
保证金:EdgeInsets。只有(左:40岁前:40)
孩子:新材料(//墨水可以实现装饰容器
孩子:新墨水(//用墨水圆角矩形//颜色:Colors.red,
装饰:新BoxDecoration (//背景
颜色:Colors.white,//设置四周圆角角度
borderRadius: BorderRadius.all (Radius.circular (25.0)),//设置四周边框
边界:新的边界。所有(宽度:1、颜色:Colors.red),
),
孩子:新墨水池(//圆角设置,给水波纹也设置同样的圆角//如果这里不设置就会出现矩形的水波纹效果
borderRadius:新BorderRadius.circular (25.0),//设置点击事件回调
alt="颤振集装箱容器实现圆角边框">
容器(
保证金:EdgeInsets。只有(左:40岁前:40)
孩子:新材料(
孩子:新墨水(//设置背景
装饰:新BoxDecoration (//背景
颜色:Colors.white,//设置四周圆角角度
borderRadius: BorderRadius.all (Radius.circular (25.0)),//设置四周边框
边界:新的边界。所有(宽度:1、颜色:Colors.red),
),
孩子:新InkResponse (
新borderRadius borderRadius:。(新Radius.circular (25.0)),//点击或者托克控件高亮时显示的控件在控件上层,水波纹下层//highlightColor: Colors.deepPurple,//点击或者托克控件高亮的形状形状
highlightShape: BoxShape.rectangle,//.InkResponse内部的半径这个需要注意的是,我们需要半径大于控件的宽,如果半径过小,显示的水波纹就是一个很小的圆,//水波纹的半径
半径:300.0,//水波纹的颜色
splashColor: Colors.yellow,//正确的表示要剪裁水波纹响应的界面假不剪裁如果控件是圆角不剪裁的话水波纹是矩形
containedInkWell:没错,//点击事件
onTap: () {
打印(“点击”);
},
孩子:容器(//设置孩子居中
对齐:对齐(0,0),
高度:50,
宽度:300年,
孩子:文本(“点击容器圆角边框”),
),
),
),
),
),
之前
,以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
