Android开发组件flutter的20个常用技巧示例总结
作者:编程小龙 发布时间:2023-06-19 17:25:23
标签:Android,组件,flutter
1.map遍历快速实现边距,文字自适应改变大小
Container(
// padding: EdgeInsets.symmetric(horizontal: 50),
// constraints: BoxConstraints.tightFor(width: 200.0, height: 150.0),
color: Colors.white,
child: Align(
alignment: Alignment.center,
child: FittedBox( // 当一行放不下时会自适应调整组件大小
child: Row(
children: [
ElevatedButton(onPressed: () => {}, child: Text("电塔")),
ElevatedButton(onPressed: () => {}, child: Text("嘿嘿")),
ElevatedButton(onPressed: () => {}, child: Text("哟西")),
ElevatedButton(onPressed: () => {}, child: Text("是蚕丝")),
]
.map((e) => Padding( // 遍历设置组件左内边距
padding: EdgeInsets.only(left: 30), child: e))
.toList()),
),
));
2.使用SafeArea 添加边距
在页面的最外层组件中包裹一个SafeArea
SafeArea( // 实质就是添加一个边距,解决ios最外边弧角导致的被遮挡
minimum: EdgeInsets.all(30),
chird:...
)
3.布局思路
1.堆叠:使用stack
2.竖直可滚动:listView
3.多格,超出自动换行:wrap
4.获取当前屏幕的大小
Wrap(
children: dataList
.map((item) => Container(
decoration: BoxDecoration(color: Colors.red),
width: (MediaQuery.of(context).size.width - 10 * 3) / 2, // 适配屏幕一行放两个,并且三个缝隙间隔
))
.toList(),
)
5.文本溢出显示省略号
Text(
data.title,
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
6.一个圆角带搜索icon的搜索框案例
Expanded(
child: Container(
height: 34,
decoration: BoxDecoration(
color: Colors.grey[200],
borderRadius: BorderRadius.circular(17)),
margin: const EdgeInsets.only(right: 10),
child: const TextField(
decoration: InputDecoration(
hintText: "请输入搜索词",
hintStyle: TextStyle(color: Colors.grey, fontSize: 14),
contentPadding: EdgeInsets.only(top: 1, left: -10),
border: InputBorder.none,
icon: Padding(
padding: EdgeInsets.only(left: 10, top: 5),
child: Icon(
Icons.search,
size: 18,
color: Colors.grey,
)),
suffixIcon: Icon(
Icons.close,
size: 18,
))),
)),
7.修改按钮的背景色
ElevatedButton(
onPressed: () {
CommonToast.showToast("退出登录");
},
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(Colors.red),
),
child: const Text(
'退出登录',
style: TextStyle(color: Colors.white),
)
),
TextButton(
style: TextButton.styleFrom(primary: Colors.green),
)
8.tab切换实例
import 'package:flutter/material.dart';
import 'package:hook_up_rent/pages/home/tab_search/data_list.dart';
import 'package:hook_up_rent/widgets/room_list_item_widget.dart';
class RoomManagePage extends StatelessWidget {
const RoomManagePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
initialIndex: 0,
child: Scaffold(
appBar: AppBar(
title: Text("房屋管理"),
centerTitle: true,
bottom: TabBar(
tabs: [
Tab(
text: "空置",
),
Tab(
text: "已租",
)
],
),
),
body: TabBarView(
children: [
ListView(
children:
dataList.map((item) => RoomListItemWidget(item)).toList(),
),
ListView(
children:
dataList.map((item) => RoomListItemWidget(item)).toList(),
)
],
),
));
}
}
9.点击事件组件点击空白区域不触发点击
GestureDetector(
behavior: HitTestBehavior.translucent, // 加上即可
10.使用主题色
var buttonTextStyle = TextStyle(
color: Theme.of(context).primaryColor,
fontWeight: FontWeight.w600);
11.往安卓模拟器中传图片
往模拟器的sdcard目录下的DCIM目录里面丢图片即可,然后点一下手机上的图片应用加载一下即可
12.控制text的最大行数显示影藏文字
Text(
data.subTitle ?? '暂无房屋概况',
maxLines: showAllText ? null : 2,
),
13.去掉默认的抽屉图标
给appbar添加此属性即可
actions: [Container()], // 填一个空元素占位,可以填充掉默认的抽屉图标,此时通过左右滑动打开对应抽屉
14.图片占满屏
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('static/images/loading.jpg'),
fit: BoxFit.fill)),
);
15.倒计时
@override
void initState() {
super.initState();
///循环执行
///间隔1秒
_timer = Timer.periodic(Duration(milliseconds: 1000), (timer) {
///自增
curentTimer++;
///到5秒后停止
if (curentTimer == 5) {
_timer.cancel();
}
setState(() {});
});
}
@override
void dispose() {
///取消计时器
_timer.cancel();
super.dispose();
}
16.固定底部
1.当内容不会滚动时可以直接在固定底部的组件上方加一个spacer组件即可。
2.当内容会滚动时需要使用epanded,且该组件只能放置在row、column等组件【不能放在listview,container,stack…】如下所示:
17.添加阴影
// 直接给Container加上如下属性即可
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8.0),
boxShadow: [
BoxShadow(
color: Colors.black12,
offset: Offset(0.0, 15.0), //阴影xy轴偏移量
blurRadius: 15.0, //阴影模糊程度
spreadRadius: 1.0 //阴影扩散程度
)
]),
18.隐藏键盘
// 关闭键盘
void _hideKeyboard() {
FocusScopeNode currentFocus = FocusScope.of(context);
if (!currentFocus.hasPrimaryFocus && currentFocus.focusedChild != null) {
/// 取消焦点,相当于关闭键盘
FocusManager.instance.primaryFocus!.unfocus();
}
}
// 在页面最外层包裹一个点击事件
GestureDetector(
onTap: _hideKeyboard,
child: Scaffold(
19.获取父级组件大小
在原来的build方法中返回组件外面套一层layoutBuilder即可
return LayoutBuilder(builder: (context, constrains) {
var maxWidth = constrains.maxWidth; // 获取父级容器大小
return Wrap()
}
20.点击事件主动冒泡
GestureDetector组件会阻止事件冒泡,此时用Listenner组件替换即可
Listener(
// 使用listener事件能够继续传递
onPointerDown: (event) {
setState(() {
isExpand = !isExpand;
});
},
child: Text('点我'),
),
来源:https://blog.csdn.net/qq_42365534/article/details/123599492
0
投稿
猜你喜欢
- 活锁与死锁活锁活锁同样会发生在多个相互协作的线程间,当他们为了彼此间的响应而相互礼让,使得没有一个线程能够继续前进,那么就发生了活锁。同死锁
- 在action中存放数据,代码如下:@Controller // 加入到IOC容器//@RequestMapping(value="
- 1、this关键字首先需要提醒的是,在整个Java之中,this是最麻烦的一个关键字,只要是代码开发,几乎都离不开this。在Java中th
- 面试题:1同步方法和同步块,哪种更好?2.如果同步块内的线程抛出异常会发生什么?1. 同步方法和同步块,哪种更好?同步块更好,这意味着同步块
- 上篇文章给大家介绍了springboot对接第三方微信授权及获取用户的头像和昵称等等1 账户注销1.1 在SecurityConfig中加入
- 当一个列表项目很多,并且每个项目可以进入到其它Activity或者Fragment时,保存之前列表的位置是一个比较不错的功能,今天研究了一下
- 多选择结构switch语句 在java中为多路分支选择流程专门提供了switch语句,switch语句根据一个表达式的值,选择运行多个操作中
- 顺序语句顺序顾名思义就是程序自上而下执行public class User { public static voi
- Excelapache 为 java开发者们提供了一套excel表格读写的工具:POI ,对于一个小白来说每次读写使用POI需要写一套复杂的
- 自动注入和@Autowire@Autowire不属于自动注入!注入方式(重要)在Spring官网上(文档),定义了在Spring中的注入方式
- 之前看到过一个数字进度条,一直想写,今天就把这个实现下,想起来也是很简单的,先看下实现的效果:思路:绘制2根线 绘制进度条的文字,不断的改变
- 本文实例为大家分享了C#实现银行家算法的具体代码,供大家参考,具体内容如下1.死锁死锁,顾名思义,是一种锁住不可自行解开的死局。在操作系统中
- 前言:前两天做项目的时候,想提高一下插入表的性能优化,因为是两张表,先插旧的表,紧接着插新的表,一万多条数据就有点慢了后面就想到
- SpringBoot项目上传图片一般是上传至远程服务器存储,开发过程中可能会上传至当前项目的某个静态目录中,此时就会遇到这个问题,文件在上传
- 初学java,单个的接触有点迷糊,所以总结下他们的关系一、关系Collection--List:以特定顺序存储--ArrayList、Lin
- public Bitmap CopyBitmap(Bitmap source){ int depth =
- 1、下载内嵌浏览器Jar包下载地址:点击下载2、项目下加入对应jar;然后右键:Add as Library...3、添加启动项目后事件效果
- 前言数据库访问是web应用必不可少的部分。现今最常用的数据库ORM框架有Hibernate与Mybatis,Hibernate貌似在传统IT
- 说明这里只以 servlet 为例,没有涉及到框架,但其实路径的基本原理和框架的关系不大,所以学了框架的同学如果对路径有疑惑的也可以阅读此文
- 1、准备工作首先需要有一个用于旋转的图片需要考虑如何开始、结束、加速、减速2、加速减速原理本次的动画采用RotateAnimation,初始