Flutter语言学习
引言
随着移动互联网的快速发展，移动应用开发已成为软件开发领域的一个重要分支。为了满足日益增长的应用需求，开发者们寻求更高效、更便捷的开发工具。Flutter作为一个由Google推出的开源移动应用开发框架，它以其高效的编码体验、优秀的性能和可观的UI保真度吸引了众多开发者的关注。本学习内容总结报告将围绕Flutter开发环境的搭建、调试方法、核心组件和布局管理进行详细阐述。
Flutter概述
Flutter是一个用于构建原生移动应用的开源框架，它允许开发者使用一套代码库来构建同时在iOS和Android上运行的应用程序。Flutter使用Dart编程语言，并提供了丰富的UI组件库、动画支持和状态管理工具，帮助开发者能够快速创建高质量和性能优良的应用程序。
Flutter环境搭建与真机调试
要开始使用Flutter进行开发，首先需要在计算机上安装Android Studio和Flutter SDK。安装完成后，可以创建一个新的Flutter项目并通过Android Studio中的模拟器或连接到真实设备进行调试。通过执行`flutter run`命令，可以启动项目并直接在模拟器或设备上查看应用效果。
Flutter Android直机器调试与虚拟机调试
在实际开发过程中，为了更贴近真实设备的表现，推荐使用真机进行调试。但当不具备测试设备时，也可以通过虚拟机（AVD）来进行调试。虚拟机提供了便利的测试环境，帮助开发者预览应用效果并进行初步测试。
在Vscode中开发Flutter应用
除了在Android Studio中进行开发外，还可以在Vscode中通过安装相应的插件来对Flutter项目进行编辑和调试。Vscode提供了代码补全、调试等功能，使得Flutter开发更加高效便捷。
Flutter核心组件介绍
Flutter目录结构及组件概览
Flutter项目的典型目录结构包括`lib`文件夹.
核心组件包括：
- Widget：是Flutter的构建块，用于描述UI。
- MaterialApp：提供Material Design风格的整体应用主题。
- Scaffold：一个基础但常用的整体布局结构。
- Center：将子组件居中显示。
- Text：显示文本。
- Container：包含并布局子组件。
- Image：显示图片。
- Icon：显示图标。
- ListView：垂直滚动列表。
- GridView：网格布局列表。
- Padding、Row、Column、Flex、Expanded：用于布局调整。
- Stack、Align、Positioned：实现高级布局。
- AspectRatio、Card、CircleAvatar：特定用途的组件。
- Button：按钮组件。
- Wrap：当子组件宽度可变时使用。
- StatefulWidget：有状态组件，用于管理组件状态。
- BottomNavigationBar：底部导航栏。
- FloatingActionButton：悬浮操作按钮。
- Drawer：侧边抽屉菜单。
- AppBar、TabBar、TabBarView：顶部导航栏。
- Router：路由管理，用于页面跳转。
void main() {
runApp(
MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text("你好Flutter")),
body:const MyApp()
),
)
);
}图片组件（Image）
`Image`组件用于在应用程序中加载和显示图片。本地图片可以通过`Image.asset()`方法加载，远程图片则可以通过`Image.network()`方法加载网络图片。为了满足不同场景的需求，还可以对图片进行剪切处理或创建圆形图片效果等操作。
void main() {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text("你好Flutter")),
body: const Column(
children:[
MyApp(),
SizedBox(height: 10,),
Circular(),
SizedBox(height: 10),
ClipImage(),
SizedBox(height: 10),
LoaclImage()
],
)
),
));
}
/*
图片地址：
https://www.itying.com/images/201906/goods_img/1120_P_1560842352183.png
https://www.itying.com/themes/itying/images/ionic4.png
*/
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return Center(
child: Container(
//alignment: Alignment.centerRight,
height: 150,
width: 150,
decoration: const BoxDecoration(
color: Colors.yellow
),
child: Image.network(
"https://www.itying.com/themes/itying/images/ionic4.png",
//alignment: Alignment.centerRight,
//scale:2 //缩小
//fit: BoxFit.cover,
//repeat: ImageRepeat.repeatX,//x轴平铺
//repeat: ImageRepeat.repeatY,//y轴平铺
//repeat: ImageRepeat.repeat,//x,y轴平铺
),
//child: Image.network("https://www.itying.com/images/201906/goods_img/1120_P_1560842352183.png"),
)
);
}
}实现一个圆形图片
void main() {
//实现一个圆形图片
class Circular extends StatelessWidget {
const Circular({super.key});
@override
Widget build(BuildContext context) {
return Container(
height: 150,
width: 150,
decoration: BoxDecoration(
color: Colors.yellow,
borderRadius:BorderRadius.circular(75),
image:const DecorationImage(
image:NetworkImage("https://www.itying.com/themes/itying/images/ionic4.png"),
fit:BoxFit.cover
)
),
);
}
}
//实现一个圆形图片 使用 ClipOval
class ClipImage extends StatelessWidget {
const ClipImage({super.key});
@override
Widget build(BuildContext context) {
return ClipOval(
child: Image.network(
"https://www.itying.com/images/201906/goods_img/1120_P_1560842352183.png",
width: 150,
height: 150,
fit: BoxFit.cover,
),
);
}
}
}Flutter图标组件与列表视图组件介绍
图标组件（Icon）
Flutter提供了内置的图标集供开发者使用，也可以自定义图标样式以满足特定的设计要求。内置图标可通过`Icon`类访问，例如：`Icon(Icons.home)`将显示内置的家用图标。自定义图标则需要通过编写对应的SVG文件来实现并导入到项目中使用。
import 'package:flutter/material.dart';
import 'ItyingFonts.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.yellow,
),
home: Scaffold(
appBar: AppBar(title: const Text("Flutter ICON")),
body: const MyHomePage(),
),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({super.key});
@override
Widget build(BuildContext context) {
return ListView(
children: const [
SizedBox(height: 20),
Icon(
Icons.home,
size: 40,
color: Colors.red,
),
SizedBox(height: 20),
Icon(Icons.settings),
SizedBox(height: 20),
Icon(Icons.search),
SizedBox(height: 20),
Icon(Icons.personal_injury_outlined),
SizedBox(height: 20),
Icon(
Icons.category,
size: 60,
color: Colors.blue,
),
Icon(
Icons.category,
size: 60,
color: Colors.blue,
),
Icon(
Icons.shop,
size: 60,
color: Colors.red,
),
SizedBox(height: 40),
Icon(
ItyingIcon.book,
size: 40,
color: Colors.orange,
),
SizedBox(height: 20),
Icon(
ItyingIcon.weixin,
size: 40,
color: Colors.green,
),
SizedBox(height: 20),
Icon(
ItyingIcon.cart,
size: 30,
color: Colors.black,
),
Icon(
ItyingIcon.yonghu,
size: 30,
color: Colors.black,
),
SizedBox(height: 20),
Icon(
ItyingIcon.address
),
SizedBox(height: 20),
Icon(
ItyingIcon.category
),
],
);
}
}按钮组件
- `ElevatedButton`：默认凸起效果的按钮。
- `TextButton`：文本按钮。
- `OutlineButton`：带边框的按钮。
Flutter路由
- `MaterialPageRoute`：用于创建页面过渡效果。
- `routes`配置：在MaterialApp中配置路由表。
import 'package:flutter/material.dart';
import '../search.dart';
import '../form.dart';
import '../news.dart';
class HomePage extends StatefulWidget {
const HomePage({super.key});
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(onPressed: (){
//跳转路由
Navigator.of(context).push(
MaterialPageRoute(builder: (BuildContext context) {
return const SearchPage();
})
);
}, child: const Text("搜索")),
const SizedBox(height: 20),
ElevatedButton(onPressed: (){
//跳转路由
Navigator.of(context).push(
MaterialPageRoute(builder: (BuildContext context) {
return const FormPage();
})
);
}, child: const Text("跳转到表单")),
const SizedBox(height: 20),
ElevatedButton(onPressed: (){
//跳转路由
Navigator.of(context).push(
MaterialPageRoute(builder: (BuildContext context) {
return const NewsPage(title: "我是标题",aid: 12,);
})
);
}, child: const Text("跳转传值"))
],
),
);
}
}自定义组件与状态管理
利用StatefulWidget可以创建有状态组件，并管理组件的状态变化。
底部导航条
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home:const Tabs() ,
);
}
}
class Tabs extends StatefulWidget {
const Tabs({super.key});
@override
State<Tabs> createState() => _TabsState();
}
class _TabsState extends State<Tabs> {
int _currentIndex=0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text("Flutter App")),
body: const Text("FLutter App"),
bottomNavigationBar: BottomNavigationBar(
currentIndex:_currentIndex,
onTap:(index){
//注意
setState(() {
_currentIndex=index;
});
},
items: const [
BottomNavigationBarItem(
icon:Icon(Icons.home),
label: "首页"
),
BottomNavigationBarItem(
icon:Icon(Icons.category),
label: "分类"
),
BottomNavigationBarItem(
icon:Icon(Icons.settings),
label: "设置"
)
]),
);
}
}import 'package:flutter/material.dart';
import './tabs/home.dart';
import './tabs/category.dart';
import './tabs/setting.dart';
import './tabs/user.dart';
class Tabs extends StatefulWidget {
const Tabs({super.key});
@override
State<Tabs> createState() => _TabsState();
}
class _TabsState extends State<Tabs> {
int _currentIndex=0;
final List<Widget> _pages=const [
HomePage(),
CategoryPage(),
SettingPage(),
UserPage()
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text("Flutter App")),
body: _pages[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
fixedColor:Colors.red, //选中的颜色
iconSize:35, //底部菜单大小
currentIndex:_currentIndex, //第几个菜单选中
type:BottomNavigationBarType.fixed, //如果底部有4个或者4个以上的菜单的时候就需要配置这个参数
onTap:(index){ //点击菜单触发的方法
//注意
setState(() {
_currentIndex=index;
});
},
items: const [
BottomNavigationBarItem(
icon:Icon(Icons.home),
label: "首页"
),
BottomNavigationBarItem(
icon:Icon(Icons.category),
label: "分类"
),
BottomNavigationBarItem(
icon:Icon(Icons.settings),
label: "设置"
),
BottomNavigationBarItem(
icon:Icon(Icons.people),
label: "用户"
)
]),
);
}
}底部导航凸起按钮
import 'package:flutter/material.dart';
import './tabs/home.dart';
import './tabs/category.dart';
import './tabs/message.dart';
import './tabs/setting.dart';
import './tabs/user.dart';
class Tabs extends StatefulWidget {
const Tabs({super.key});
@override
State<Tabs> createState() => _TabsState();
}
class _TabsState extends State<Tabs> {
int _currentIndex = 0;
final List<Widget> _pages = const [
HomePage(),
CategoryPage(),
MessagePage(),
SettingPage(),
UserPage()
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text("Flutter App")),
body: _pages[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
fixedColor: Colors.red, //选中的颜色
// iconSize:35, //底部菜单大小
currentIndex: _currentIndex, //第几个菜单选中
type: BottomNavigationBarType.fixed, //如果底部有4个或者4个以上的菜单的时候就需要配置这个参数
onTap: (index) {
//点击菜单触发的方法
//注意
setState(() {
_currentIndex = index;
});
},
items: const [
BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
BottomNavigationBarItem(icon: Icon(Icons.category), label: "分类"),
BottomNavigationBarItem(icon: Icon(Icons.message), label: "消息"),
BottomNavigationBarItem(icon: Icon(Icons.settings), label: "设置"),
BottomNavigationBarItem(icon: Icon(Icons.people), label: "用户")
]),
floatingActionButton: Container(
height: 60, //调整FloatingActionButton的大小
width: 60,
padding: const EdgeInsets.all(5),
margin: const EdgeInsets.only(top: 5), //调整FloatingActionButton的位置
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(30),
),
child: FloatingActionButton(
backgroundColor:_currentIndex==2?Colors.red:Colors.blue,
child: const Icon(Icons.add),
onPressed: () {
setState(() {
_currentIndex=2;
});
}
),
),
floatingActionButtonLocation:
FloatingActionButtonLocation.centerDocked, //配置浮动按钮的位置
);
}
}
结论
Flutter提供了强大的跨平台开发能力，丰富的UI组件库，以及一套完整的开发工具链。通过掌握这些组件和开发技巧，可以高效地构建出高质量的应用程序。随着Flutter生态系统的不断完善，未来将有更多的企业和个人开发者采用Flutter技术栈进行移动应用的开发。
扫一扫
1407
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
