flutter 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 圆角边框"),
    ),
    ),
   ),
   ),
  ),

 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。