Flutter 设置圆角,边框
flutter 设置 边框 圆角
2023-09-14 09:04:29 时间
参考
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 可点击的圆角矩形边框(会有水波纹效果)
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 圆角边框"),
),
),
),
),
),
相关文章
- flutter Radio 单选框
- Flutter的showModalBottomSheet 输入框被弹出的键盘挡住?
- 每日tips:Dart & Flutter Easy Wins 36-42
- Flutter 绘制集录 | 第四画 - 风车
- Flutter中如何设置全局字体
- flutter系列之:flutter中可以建索引的栈布局IndexedStack
- 第126期:如何学习flutter组件
- Flutter深入浅出获取帧率
- 一天搞定:Flutter + ChatGPT,打造智能聊天机器人
- 【Flutter】Dart 数据类型 字符串类型 ( 字符串定义 | 字符串拼接 | 字符串 API 调用 )
- 【错误记录】Flutter 设备连接显示 Loading... ( 断网 | 删除 flutter/bin/cache/lockfile 文件 )
- 【Flutter】Image 组件 ( Image 组件简介 | Image 构造函数 | Image.network 构造函数 | Image.asset 构造函数 )
- 【Flutter】Animation 动画 ( Flutter 动画的核心类 | Animation | CurvedAnimation | AnimationController | Tween )
- 【Flutter】Future 与 FutureBuilder 异步编程代码示例 ( FutureBuilder 构造函数设置 | 处理 Flutter 中文乱码 | 完整代码示例 )