Flutter设置圆角边框,Flutter圆角背景

在这里使用 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 圆角边框"),
                ),
              ),
            ),
          ),
        ),
 

转自：https://blog.csdn.net/zl18603543572/article/details/95641481