Flutter 控件学习记笔记
1 自适应宽度流式布局
自适应宽度流式布局
Container(
margin: EdgeInsets.only(
top: 10.0,
),
alignment: Alignment.centerLeft,
child: Wrap(
spacing: 8.0,
runSpacing: 8.0,
children: node.childNodes.map((childNode) {
return GestureDetector(
child: new ClipRRect(
child: Container(
padding: EdgeInsets.all(3.0),
child: Text(
childNode.name,
style: TextStyle(
color: Colors.white,
shadows: [
Shadow(color: Colors.grey, offset: Offset(0.2, 0.2))
],
),
),
color: getRandomColor(),
),
borderRadius: new BorderRadius.circular(3.0),
),
onTap: () {
NavigatorRouterUtils.pushToPage(
context,
new ArticlePage(
name: childNode.name,
id: childNode.mId,
type: ArticleType.NORMAL_ARTICLE,
));
},
);
}).toList(),
),
);
也就是使用Wrap包裹的列表；
2 水波纹点击控件
InkWell(
onTap: () {
},
child: Container(),
);
使用InkWell包裹即可；
3 Activity跳转动画
3.1 首先定义一个动画类型
class RouterAnim {
static createTransition(Animation<double> animation, Widget child) {
return SlideTransition(
position: new Tween<Offset>(
begin: const Offset(1.0, 0.0),
end: const Offset(0.0, 0.0),
).animate(animation),
child: child,
);
}
}
3.2 在Navigator中跳转并使用它
class NavigatorRouterUtils {
/**
* 跳转到指定page
*/
static void pushToPage(BuildContext context, Widget page) {
Navigator.of(context).push(new PageRouteBuilder(pageBuilder:
(BuildContext c, Animation<double> animation,
Animation<double> secondartAnimation) {
return page;
}, transitionsBuilder: (BuildContext c, Animation<double> animation,
Animation<double> secondartAnimation, Widget child) {
return RouterAnim.createTransition(animation, child);
}));
}
}
3.3 使用
下面是一个页面跳转的demo：
IconButton(
icon: Icon(
Icons.search,
color: Colors.white,
),
onPressed: () {
NavigatorRouterUtils.pushToPage(context, new SearchPage());
},
)；
4 自定义一个AppBar搜索框
AppBar搜索框
class SearchTextField extends StatelessWidget {
final GestureTapCallback onSearchTap;
final TextEditingController controller;
final FocusNode focusNode;
SearchTextField({this.controller, this.onSearchTap, this.focusNode});
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
margin: EdgeInsets.only(top: 8.0, bottom: 8.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(2.0),
),
child: TextField(
focusNode: focusNode,
controller: controller,
autofocus: false,
cursorColor: Colors.black,
style: TextStyle(
color: Colors.black,
fontSize: 16.0,
),
decoration: InputDecoration(
border: InputBorder.none,
hintText: '搜索一下吧.',
hintStyle: TextStyle(
color: Colors.grey,
),
prefixIcon: GestureDetector(
child: Icon(
Icons.arrow_back,
color: Colors.blue,
size: 30.0,
),
onTap: () {
Navigator.pop(context);
},
),
suffixIcon: GestureDetector(
child: Icon(
Icons.search,
color: Colors.blue,
size: 30.0,
),
onTap: onSearchTap,
),
),
),
);
}
}
- 使用
TextEditingController的text属性来回去输入的内容； - 使用
FocusNode的unFocus()方法来强制失去焦点；
在AppBar中使用：
new Scaffold(
appBar: AppBar(
flexibleSpace: new SearchTextField(
onSearchTap: () {
},
controller: controller,
focusNode: focusNode,
),
automaticallyImplyLeading: false,
),
body: contentWidget,
);
5 圆角标签
圆角标签
使用Container非常简单：
new ClipRRect(
child: Container(
padding: EdgeInsets.all(3.0),
child: Text(
childNode.name,
style: TextStyle(
color: Colors.white,
shadows: [
Shadow(color: Colors.grey, offset: Offset(0.2, 0.2))
],
),
),
color: getRandomColor(),
),
borderRadius: new BorderRadius.circular(3.0),
),
6 获取一个随机的颜色
引入包：
import 'dart:math';
获取随机颜色：
getRandomColor() {
return Color.fromARGB(
255,
Random.secure().nextInt(255),
Random.secure().nextInt(255),
Random.secure().nextInt(255));
}
项目开源地址：Fluttter 控件学习
持续更新...
