flutter Container容器实现圆角边框

所属分类: 软件编程 / Android 阅读数: 55
收藏 0 赞 0 分享

本文实例为大家分享了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 圆角边框"),
    ),
    ),
   ),
   ),
  ),

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

更多精彩内容其他人还在看

Android 自定义球型水波纹带圆弧进度效果(实例代码)

最近小编接到一个这样的需求,需要实现一个圆形水波纹,带进度,两层水波纹需要渐变显示,且外围有一个圆弧进度。今天小编给大家分享实例代码,感兴趣的朋友一起看看吧
收藏 0 赞 0 分享

Flutter 实现下拉刷新上拉加载的示例代码

这篇文章主要介绍了Flutter 实现下拉刷新上拉加载的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

Windows实现Flutter环境搭建及配置这一篇就够了

这篇文章主要介绍了Windows实现Flutter环境搭建及配置这一篇就够了,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

Android利用碎片fragment实现底部标题栏(Github模板开源)

Fragment可以作为Activity的组成部分,一个Activity可以有多个Fragment,这篇文章主要介绍了Android利用碎片fragment实现底部标题栏(Github模板开源),需要的朋友可以参考下
收藏 0 赞 0 分享

android studio 的下拉菜单Spinner使用详解

这篇文章主要介绍了android studio 的下拉菜单Spinner使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

解析Android 8.1平台SystemUI 导航栏加载流程

这篇文章主要介绍了Android 8.1平台SystemUI 导航栏加载流程,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

Android仿微信录音功能

这篇文章主要为大家详细介绍了Android仿微信录音功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

Android仿微信键盘切换效果

这篇文章主要为大家详细介绍了Android仿微信键盘切换效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

Android超清晰6.0权限申请AndPermission

这篇文章主要介绍了Android超清晰6.0权限申请AndPermission,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

Android仿微信录制语音功能

这篇文章主要介绍了Android仿微信录制语音功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享
查看更多