flutter Container容器实现圆角边框
作者:早起的年轻人 发布时间:2021-06-17 23:16:23
标签: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 圆角边框"),
),
),
),
),
),
来源:https://blog.csdn.net/zl18603543572/article/details/95641481
0
投稿
猜你喜欢
- 本文实例讲述了C#使用HtmlAgilityPack抓取糗事百科内容的方法。分享给大家供大家参考。具体实现方法如下:Console.Writ
- 把三状态转换图放在这,方便分析方法的作用:1.Session的save()方法Session是Hibernate所有接口中最重要的接口,提供
- maven使用过程中无法导入依赖的一些总结作为一名java开发的新手,在学习中难免遇见各种问题,在此总结一下。在使用maven过程中总是碰见
- 本文实例讲述了Java正则验证正整数的方法。分享给大家供大家参考,具体如下:package des;import java.util.reg
- 前言在开发Wpf/SL应用时,经常会遇到不同页面和窗体之间的参数传递的问题。对于这类问题,我们一般通过事件实现数据传递,也可以定义全局静态变
- android仿照qq的顶部栏效果,主要就是利用fragment manager把fragment设置显示内容(1)在activity_ma
- 本文实例为大家分享了Android实现图片点击 * 效果的具体代码,供大家参考,具体内容如下实现效果:需要注意的点:ValueAnimator
- 多数据源创建数据库CREATE DATABASE mybatis_plus_1;USE mybatis_plus_1;CREATE TABL
- 本文实例讲述了Java实现求解一元n次多项式的方法。分享给大家供大家参考,具体如下:项目需要做趋势预测,采用线性拟合、2阶曲线拟合和指数拟合
- 写在前面Activity是Android四大组件之一,用于直接跟用户进行交互,本篇文章将介绍Activity的启动流程。用户启动Activi
- poi解析Excel文件版本问题解决办法poi解析Excel文件时有两种格式: HSSFWorkbook格式用来解析Excel2003(xl
- 本文研究的主要是Hibernate hql查询的相关内容,具体如下。HQL介绍Hibernate语言查询(Hibernate Query L
- Springboot 实体类生成数据库表JPA:springboot -jpa:数据库的一系列的定义数据持久化的标准的体系学习的目的是:利用
- 一、使用线程的理由1、可以使用线程将代码同其他代码隔离,提高应用程序的可靠性。2、可以使用线程来简化编码。3、可以使用线程来实现并发执行。二
- session失效时间 在Tomcat上,session的默认有效时间是30分钟。也可以通过配置文件修改session的有效时间。
- Java的反射机制允许我们对一个类的加载、实例化、调用方法、操作属性的时期改为在运行期进行,这大大提高了代码的灵活度。但在运行期进行反射操作
- 对象是使用new创建的,但是并没有与之相对应的delete操作来回收对象占用的内存。当我们完成对某个对象的使用时,只需停止对该对象的引用:将
- 1、return语句的作用:a、返回一个值,这个值可以是任意类型。b、使程序返回到操作系统(即终止程序)2、java中对于一个函数,不论有没
- 一、栈(Stack)1、什么是栈?栈其实就是一种数据结构 - 先进后出(先入栈的数据后出来,最先入栈的数据会被压入栈底)什么是java虚拟机
- 因为mybatis好使,所以几乎需要操作数据库的时候,我都会使用mybatis,而且在一个正式的项目中,同时存在BS和CS的程序,都使用的M