Flutter第7天--字体图标+综合小案例+Android代码交互

最新推荐文章于 2024-09-07 19:03:38 发布

piade

最新推荐文章于 2024-09-07 19:03:38 发布

阅读量370

点赞数 3

分类专栏：程序员文章标签： flutter android 交互

本文链接：https://blog.csdn.net/piade/article/details/138913925

版权

程序员专栏收录该内容

302 篇文章 0 订阅

订阅专栏

/// — material icon named “3d rotation”.
static const IconData threed_rotation = IconData(0xe84d, fontFamily: ‘MaterialIcons’);

/// — material icon named “4k”.
static const IconData four_k = IconData(0xe072, fontFamily: ‘MaterialIcons’);

3.怎么才能自定义字体图标

玩前端的应该都知道:还是进入阿里图标神库:iconfont

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

4.根据Flutter内置的类，我写了一个`自动代码生成器`

虽然直接也能用，不够要记住图标的unicode码，算了，还是跟Flutter看齐吧

注意：为了简单使用：拷贝到的位置，命名，请务必和下面保持一致!保持一致!
把两个文件拷贝到对应处，icon_by_toly.dart写好(在下面)，右键运行就自动生成iconfont.dart了

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

代码生成器：icon_by_toly.dart

import ‘dart:io’;

main() {
var result = “”"import ‘package:flutter/widgets.dart’;
//Power By 张风捷特烈— Generated file. Do not edit.

class TolyIcon {

TolyIcon._();
“”";

var fileCss = File.fromUri(Uri.parse(“${Uri.base}iconfont/iconfont.css”));
if (!fileCss.existsSync()) {
return;
}

var read = fileCss.readAsStringSync();

var split = read.split(“.icon-”);
split.forEach((str) {
if (str.contains(“before”)) {
var split = str.split(“:”);
result += “static const IconData " +
split[0].replaceAll(”-“, “_”) +
" = const IconData(” +
split[2].replaceAll(“”\“, “0x”).split(”“”)[0] +
“, fontFamily: “TolyIcon”);\n”;
}
});
result+=“}”;
fileCss.delete();

var fileOut = File.fromUri(Uri.parse(“${Uri.base}lib/iconfont.dart”));
fileOut.writeAsStringSync(result);

var config=“”"
fonts:

family: TolyIcon
fonts:
asset: iconfont/iconfont.ttf
“”“;
var yaml = File.fromUri(Uri.parse(”${Uri.base}pubspec.yaml"));
if (yaml.readAsStringSync().contains(“TolyIcon”)) {
return;
}
yaml.writeAsString(config,mode: FileMode.append);
}

`pubspec.yaml`的flutter标签下也会自动生成配置：

fonts:

family: TolyIcon
fonts:
asset: iconfont/iconfont.ttf

Icon(TolyIcon.icon_spring_boot)//颜色可自行处理

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

友情提示：下载之前最好把图标名字改一下，不然之后找起来费劲

如果实在不想该，可以点击这里查看名字和图标的对应情况

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

二、综合小案例

1.初始代码：`主页面：android_stack.dart`

import ‘package:flutter/material.dart’;

class AndroidPage extends StatefulWidget {
@override
_AndroidPageState createState() => _AndroidPageState();
}

class _AndroidPageState extends State
with SingleTickerProviderStateMixin {

@override
void initState() {
super.initState();
}

@override
Widget build(BuildContext context) {

var scaffold = Scaffold(
appBar: AppBar(
title: Text(“张风捷特烈”),
),
body: Container(),
floatingActionButton: FloatingActionButton(
onPressed: () {

},
tooltip: ‘Increment’,
child: Icon(Icons.add),
),
);

return scaffold;
}
}

2.拼接底部条

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2.1:常量的准备：(为了方便使用或修改)

class ItemBean {
Color color;
IconData iconId;
String info;
ItemBean(this.color, this.iconId, this.info);
}

//底部栏图标信息
var iconLi=[
ItemBean(Color(0xff8FC552),TolyIcon.android,“Android”),
ItemBean(Color(0xff6BFB00),TolyIcon.icon_spring_boot,“SpringBoot”),
ItemBean(Color(0xff63DAFF),TolyIcon.react,“React”),
ItemBean(Color(0xffF3D861),TolyIcon.biji,“编程随笔”),
ItemBean(Color(0xff5CEBF2),TolyIcon.daima,“系列文章”)
];

2.2:底部栏：

//成员变量
int _curIndex = 0;

//底部栏
var bottomNavigationBar = BottomNavigationBar(
items: iconLi.map((item) {
return BottomNavigationBarItem(
title: Text(
item.info,
style: TextStyle(fontSize: 12, color: Colors.black),
),
icon: Icon(
item.iconId,
color: item.color,
),
backgroundColor: Color(0xffffffff));
}).toList(),
currentIndex: _curIndex,
onTap: _onTapBNB,
);

2.3：底部栏点击监听：`_onTapBNB`

//底部栏点击监听
void _onTapBNB(int position) {
_curIndex = position;
setState(() {});
}

3:页面条目：

第五天写了几个条目，现在拿来用(详细分析见第五天，这里不废话了)

静态填充	左侧滑栏

3.1：左侧滑栏:`left_draw.dart`

class LeftDrawPage extends StatefulWidget {
@override
_LeftDrawPageState createState() => _LeftDrawPageState();
}

class _LeftDrawPageState extends State
with SingleTickerProviderStateMixin {
@override
Widget build(BuildContext context) {
//左边头像
var headImg3 = Image.asset(
“images/icon_90.png”,
width: 50,
height: 50,
);
//中间的信息
var center3 = Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
“张风捷特烈”,
style: bigStyle,
),
Row(
children: [
Icon(Icons.next_week, size: 15),
pd(Text(“创世神 | 无”), l: 5)
],
),
Row(
children: [
Icon(Icons.keyboard, size: 15),
pd(Text(“海的彼岸有我未曾见证的风采”), l: 5)
],
),
],
);
var rowLine3 = Row(
children: [
pda(headImg3, 5),
Expanded(child: pda(center3, 5)),
],
);
var test3 = Card(
child: Container(
height: 95,
color: Colors.white,
padding: EdgeInsets.all(5),
child: rowLine3));
return Drawer(
elevation: 5,
child: Container(
padding: EdgeInsets.only(top: 50),
alignment: AlignmentDirectional.topCenter,
color: Color(0xff99C6F9),
child: test3));
}
}

3.2：列表静态填充:`home_list.dart`

class HomeListPage extends StatefulWidget {
@override
_HomeListPageState createState() => _HomeListPageState();
}

class _HomeListPageState extends State {
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: 10,
itemBuilder: (BuildContext context, int index) {
return renderItem(index);
},
);
}

renderItem(int index) {
-----------------测试4--------------------------------
var line1_4 = Row(
children: [
Image.asset(“images/icon_90.png”, width: 20, height: 20),
Expanded(
child: pd(Text(“张风捷特烈”), l: 5),
),
Text(
“Flutter/Dart”,
style: infoStyle,
)
],
);

var center_right = Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(
“Flutter第4天–基础控件(下)+Flex布局详解”,
style: littelStyle,
maxLines: 2,
),
pd(
Text(
“1.2：优雅地查看：图片的适应模式–BoxFit1.3：优雅地查看：颜色混合模式–colorBlendMode”,
style: infoStyle,
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
t: 5),
],
);

//中间的信息
var center4 = Row(
children: [
Expanded(child: pda(center_right, 5)),
Image.asset(
“images/wy_300x200.jpg”,
width: 80,
height: 80,
fit: BoxFit.fitHeight,
)
],
);

var end4 = Row(
children: [
Icon(
Icons.grade,
color: Colors.green,
size: 20,
),
Text(
“1000W”,
style: infoStyle,
),
pd(Icon(Icons.tag_faces, color: Colors.lightBlueAccent, size: 20),
l: 15, r: 5),
Text(“2000W”, style: infoStyle),
],
);

var item4 = Column(
children: [line1_4, Expanded(child: center4), end4],
);

var aCard = Card(
child: Container(
height: 160,
color: Colors.white,
padding: EdgeInsets.all(10),
child: item4));

return aCard;
}
}

4.动态数据获取：

昨天已经把http获取数据的内容将过了，并且把服务端的数据解析了

今天就是使用这些数据，来填充静态界面，api接口介绍和NoteBean昨天已完成

封装一个获取数据的方法：简单说下用法:

style是类型：Android是A ;SpringBoot是SB ; React 是Re ; 笔记是 Note
offset和num 联合使用可以达到分页效果，比如offset=24,num=12,就是一页12条数据的第3页

import ‘dart:convert’;

import ‘package:http/http.dart’ as client;
import ‘package:toly/pager/day7/bean.dart’;

const BASE_URL = ‘http://192.168.43.60:8089’;//api接口的域名自己改一下
const API = ‘/api/android/note/’;

Future<List> get({style = ‘’, offset = 0, num = 1}) async {
var dataLi = [];
var url = BASE_URL + API + style + “/” + “ $o ff se t " + "/" + "$ num”;
try {
final response = await client.get(url);
if (response.statusCode == 200) {
var result = ResultBean.fromJson(json.decode(response.body));
List data = result.data;
print(NoteBean.fromJson(data[0]).type);
for (int i = 0; i < data.length; i++) {
dataLi.add(NoteBean.fromJson(data[i]));
}
return dataLi;
}
} catch (e) {
print(e);
}
}

5.用一个数据来进行填充测试：

主页面：android_stack.dart,initState的时候获取数据，并更新状态

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

//定义一个成员变量
List _notes = [];

@override
void initState() {
super.initState();

get(num: 1).then((beanLi) {
_notes = beanLi;
setState(() {});
});
}

列表界面：home_list.dart:接收主界面传来的_notes，并渲染数据

class HomeListPage extends StatefulWidget {
List _notes;
HomeListPage(List notes) {
_notes = notes;
}
@override
_HomeListPageState createState() => _HomeListPageState();
}

class _HomeListPageState extends State {
@override
Widget build(BuildContext context) {
var notes = widget._notes;

return ListView.builder(
itemCount: notes.length,
itemBuilder: (BuildContext context, int index) {
return renderItem(notes[index]);
},
);
}
//渲染条目
renderItem(NoteBean note) {
var line1_4 = Row(
children: [
Image.asset(“images/icon_90.png”, width: 20, height: 20),
Expanded( child: pd(Text(“张风捷特烈”), l: 5),),
Text( note.type,style: infoStyle,)
],
);
var center_right = Column(
mainAxisSize: MainAxisSize.min,
children: [Text(note.name,style: littelStyle,maxLines: 2,),
pd(Text( note.info, style: infoStyle, maxLines: 2,
overflow: TextOverflow.ellipsis, ), t: 5),
],
);

//中间的信息
var center4 = Row(
children: [
Expanded(child: pda(center_right, 5)),
Image.network( note.imgUrl,
width: 80, height: 80, fit: BoxFit.fitHeight )
],
);

var end4 = Row(
children: [
Icon( Icons.grade, color: Colors.green, size: 20, ),
Text( “1000W”, style: infoStyle,),
pd(Icon(Icons.tag_faces, color: Colors.lightBlueAccent, size: 20),
l: 15, r: 5),
Text(“2000W”, style: infoStyle),
],
);

var item4 = Column(
children: [line1_4, Expanded(child: center4), end4],
);

var aCard = Card(
child: Container( height: 160,color: Colors.white,
padding: EdgeInsets.all(10), child: item4));
return aCard;
}
}

现在万事俱备，东风也到了,num小小动一下：num=30

–	–

也许你感觉还未开始，但确实已经结束了…

6.底部导航栏的切换：(下面两个图一样的，为了撑场面…)

刚才是数据没有分类型，现在点击底部导航，按范围进行展示

get(style: "area/A", num: 30)//这样就是展示又有安卓类的文章

-	-

android_stack.dart添加成员变量

这里我默认加载完，做分页的话，再添加个_count的成员变量就行了

String style = “area/A”;

//页面打开，默认加载安卓页
@override
void initState() {
super.initState();
get(style: style, num: 1000).then((beanLi) {
_notes = beanLi;
setState(() {});
});
}

//底部栏点击监听—动态改变范围
void _onTapBNB(int position) {
switch (position) {
case 0:
style = “area/A”;
break;
case 1:
style = “area/SB”;
break;
case 2:
style = “area/Re”;
break;
case 3:
style = “area/Note”;
break;
case 4:
style = “area/A”;
break;
}
_curIndex = position;
get(style: style, num: 1000).then((beanLi) {
_notes = beanLi;
setState(() {});
});
}

7.底部栏和搜索功能

底部栏用法详情在第四篇

–	–

底部栏:这里把事件写在里面了，你也可以抽成方法

或者有些控件太长，你也可以抽出来做变量

//点击按钮弹出：
var scContext; //先声明一下Scaffold的context
var scaffold = Scaffold(
appBar: AppBar(
title: Text(“张风捷特烈”),
),
body: Builder(builder: (context) {
scContext = context;
return HomeListPage(_notes);
}),
floatingActionButton: FloatingActionButton(
onPressed: () {
Scaffold.of(scContext).showBottomSheet(searchSheet.builder);
},
//下面不用修改，略…

Ok,小案例就这样

三、Android代码交互

1.最简单的无参无返回函数调用：`两对应`

不得不说：前六天不能弹吐司真是不好受，原生交互肯定先拿他开刀

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

1.1：Android代码

public class MainActivity extends FlutterActivity {
private static final String CHANNEL = “www.toly1994.com/test.名字随意起”;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
GeneratedPluginRegistrant.registerWith(this);

new MethodChannel(getFlutterView(), CHANNEL).setMethodCallHandler(
new MethodChannel.MethodCallHandler() {
@Override
public void onMethodCall(MethodCall methodCall, MethodChannel.Result result) {
if (methodCall.method.equals(“showToast”)) {
showToast(“Hello Flutter,I am in Android”);
} else {
result.notImplemented();
}
}
}
);
}
/**

显示吐司
@param msg 信息
*/
public void showToast(String msg) {
Toast toast = Toast.makeText(this, msg, Toast.LENGTH_SHORT);
toast.show();
}
}

import ‘package:flutter/material.dart’;
import ‘package:flutter/services.dart’;

const platform = const MethodChannel(“www.toly1994.com/test.名字随意起”);

var toastTest = Center(
child: RaisedButton(
onPressed: () {
platform.invokeMethod(“showToast”);
},
child: new Text(“点击弹吐司”),
),
);

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2.Flutter中传参，调用Android含参方法:`三对应`

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2.1：Android代码

public class MainActivity extends FlutterActivity {
private static final String CHANNEL = “www.toly1994.com/test.名字随意起”;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
GeneratedPluginRegistrant.registerWith(this);

new MethodChannel(getFlutterView(), CHANNEL).setMethodCallHandler(
new MethodChannel.MethodCallHandler() {
@Override
public void onMethodCall(MethodCall methodCall, MethodChannel.Result result) {
if (methodCall.method.equals(“showToast”)) {
//解析参数
String msg = methodCall.argument(“msg”);
showToast(msg);
} else {
result.notImplemented();
}
}
}
);
}

/**

显示吐司
@param msg 信息
*/
public void showToast(String msg) {
Toast toast = Toast.makeText(this, msg, Toast.LENGTH_SHORT);
toast.show();
}
}

2.2:Flutter代码：

import ‘package:flutter/material.dart’;
import ‘package:flutter/services.dart’;

const platform = const MethodChannel(“www.toly1994.com/test.名字随意起”);

var toastTest = Center(
child: RaisedButton(
onPressed: () {
platform.invokeMethod(“showToast”,{“msg”:“Flutter大爷我赏你一口吐司”});
},
child: new Text(“点击弹吐司”),
),
);

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2.3：加返回值的方法调用：

举什么例子，我想了一会，就来个MD5码吧

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

//Activity添加判断分支
if (methodCall.method.equals(“getMD5”)) {
String arg = methodCall.argument(“arg”);
String md5 = getMD5(arg);
result.success(md5);
}

/**

获取一个字符串的Md5值
@param content 内容
@return Md5值
*/
public String getMD5(String content) {
content = content + “芝麻开门”;
try {
MessageDigest digest = MessageDigest.getInstance(“MD5”);
digest.update(content.getBytes());
return getHashString(digest);
} catch (NoSuchAlgorithmException e) {
e.printStackTrace();
}
return null;
}

private static String getHashString(MessageDigest digest) {
StringBuilder builder = new StringBuilder();
for (byte b : digest.digest()) {
builder.append(Integer.toHexString((b >> 4) & 0xf));
builder.append(Integer.toHexString(b & 0xf));
}
return builder.toString();
}

总结

学习技术是一条慢长而艰苦的道路，不能靠一时激情，也不是熬几天几夜就能学好的，必须养成平时努力学习的习惯。所以：贵在坚持！

最后如何才能让我们在面试中对答如流呢？

答案当然是平时在工作或者学习中多提升自身实力的啦，那如何才能正确的学习，有方向的学习呢？有没有免费资料可以借鉴？为此我整理了一份Android学习资料路线：

这里是一部分我工作以来以及参与过的大大小小的面试收集总结出来的一套BAT大厂面试资料专题包，主要还是希望大家在如今大环境不好的情况下面试能够顺利一点，希望可以帮助到大家。

好了，今天的分享就到这里，如果你对在面试中遇到的问题，或者刚毕业及工作几年迷茫不知道该如何准备面试并突破现状提升自己，对于自己的未来还不够了解不知道给如何规划。来看看同行们都是如何突破现状，怎么学习的，来吸收他们的面试以及工作经验完善自己的之后的面试计划及职业规划。

最后，祝愿即将跳槽和已经开始求职的大家都能找到一份好的工作！

这些只是整理出来的部分面试题，后续会持续更新，希望通过这些高级面试题能够降低面试Android岗位的门槛，让更多的Android工程师理解Android系统，掌握Android系统。喜欢的话麻烦点击一个喜欢再关注一下
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！
& 0xf));
builder.append(Integer.toHexString(b & 0xf));
}
return builder.toString();
}

总结

学习技术是一条慢长而艰苦的道路，不能靠一时激情，也不是熬几天几夜就能学好的，必须养成平时努力学习的习惯。所以：贵在坚持！

最后如何才能让我们在面试中对答如流呢？

[外链图片转存中…(img-zrFZax2s-1715762225772)]

[外链图片转存中…(img-hmt212Cn-1715762225773)]

最后，祝愿即将跳槽和已经开始求职的大家都能找到一份好的工作！

这些只是整理出来的部分面试题，后续会持续更新，希望通过这些高级面试题能够降低面试Android岗位的门槛，让更多的Android工程师理解Android系统，掌握Android系统。喜欢的话麻烦点击一个喜欢再关注一下
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！

piade

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Flutter第7天--字体图标+综合小案例+Android代码交互

iconfont学习技术是一条慢长而艰苦的道路，不能靠一时激情，也不是熬几天几夜就能学好的，必须养成平时努力学习的习惯。所以：贵在坚持！最后如何才能让我们在面试中对答如流呢？答案当然是平时在工作或者学习中多提升自身实力的啦，那如何才能正确的学习，有方向的学习呢？有没有免费资料可以借鉴？为此我整理了一份Android学习资料路线：这里是一部分我工作以来以及参与过的大大小小的面试收集总结出来的一套BAT大厂面试资料专题包，主要还是希望大家在如今大环境不好的情况下面试能够顺利一点，希望可以帮助到大家。
复制链接

扫一扫