flutter开发常见属性详细解析大全

1、常用的快捷键 vetur插件

r 键 ：点击后热加载，也就算是重新加载吧。
R键：热重启项目。
p 键：显现网格，这个能够很好的把握布局状况，工作中很有用。
o 键：切换android和ios的预览形式。
q 键：退出调试预览形式。

2、Container容器组件

3、Text组件详解

4、图片组件详解

5、Flutter 列表组件

6、Flutter GridView网格布局组件

7、线性布局（Row和Column）

8、弹性布局（Flex Expanded）

Flex 组件能够沿着水平或垂直方向排列子组件，假如你知道主轴方向，使用 Row 或 Column 会方便一
些，因为 Row 和 Column 都承继自 Flex ，参数基本相同，所以能使用Flex的地方基本上都能够使用
Row 或 Column。 Flex 自身功能是很强大的，它也能够和 Expanded 组件合作完成弹性布局。

9、层叠布局（Stack、Align、Positioned）

Stack表明堆的意思，咱们能够用Stack或许Stack结合Align或许Stack结合 Positiond来完成页面的定位
布局

Align 组件能够调整子组件的方位 , Stack组件中结合Align组件也能够控制每个子元素的显现方位。
Stack组件中结合Positioned组件也能够控制每个子元素的显现方位。

10、FlutterMediaQuery获取屏幕宽度和高度

Widget build(BuildContext context) {
final size =MediaQuery.of(context).size;
final width =size.width;
final height =size.height;
}

弥补：double.infinity 和double.maxFinite能够让当前元素的width或许height达到父元素的尺度

11、Flutter AspectRatio

AspectRatio的作用是根据设置调整子元素child的宽高比。
AspectRatio首先会在布局限制条件答应的范围内尽可能的扩展，widget的高度是由宽度和比率决议
的，相似于BoxFit中的contain，按照固定比率去尽量占满区域。
假如在满意一切限制条件过后无法找到一个可行的尺度，AspectRatio终究将会去优先适应布局限制条
件，而疏忽所设置的比率

// CircleAvatar完成一个圆形图片
const CircleAvatar(
radius: 110,
backgroundColor: Color(0xffFDCF09),
child: CircleAvatar(
radius: 100,
backgroundImage:
NetworkImage("https://www.6hu.cc/files/2023/09/1696030537-15a0abe38a968ce.png"),
)
)

12、Flutter Card组件

Card是卡片组件块，内容能够由大多数类型的Widget构成，Card具有圆角和阴影，这让它看起来有立
体感。

Card(
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10))),
// color: Colors.red,
elevation: 20,
margin: const EdgeInsets.all(10),
child: Column(
children: const <Widget>[
ListTile(
title: Text("李四", style: TextStyle(fontSize: 28)),
subtitle: Text("高档软件工程师"),
),
Divider(),
ListTile(
title: Text("电话：1213214142"),
),
ListTile(title: Text("地址：北京市海淀区"))
],
),

13、Flutter 按钮组件

ButtonStylee里面的常用的参数

//圆角
ElevatedButton(
style: ButtonStyle(
backgroundColor:MaterialStateProperty.all(Colors.blue),
foregroundColor: MaterialStateProperty.all(Colors.white),
elevation: MaterialStateProperty.all(20),
shape: MaterialStateProperty.all(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10))
),
),
onPressed: () {
print("圆角按钮");
},
child: const Text('圆角')
)
//圆形
child: ElevatedButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.blue),
foregroundColor:
MaterialStateProperty.all(Colors.white),
elevation: MaterialStateProperty.all(20),
shape: MaterialStateProperty.all(
CircleBorder(side: BorderSide(color: Colors.white)),
)),
onPressed: () {
print("圆形按钮");
},
child: const Text('圆形按钮')),
//OutlinedButton黑色字体红色边框
child: OutlinedButton(
style: ButtonStyle(
foregroundColor:
MaterialStateProperty.all(Colors.black),
side: MaterialStateProperty.all(
const BorderSide(width: 1, color: Colors.red))),
onPressed: () {},
child: const Text("注册 配置边框")),
)

14、Flutter Wrap组件

Wrap能够完成流布局，单行的Wrap跟Row表现简直共同，单列的Wrap则跟Column表现简直共同。但
Row与Column都是单行单列的，Wrap则突破了这个限制，mainAxis上空间不足时，则向crossAxis上
去扩展显现。

15、Flutter StatelessWidget 、StatefulWidget

在Flutter中自界说组件其实就是一个类，这个类需要承继StatelessWidget/StatefulWidget。
StatelessWidget是无状况组件，状况不可变的widget
StatefulWidget是有状况组件，持有的状况可能在widget生命周期改动。
浅显的讲：假如咱们想改动页面中的数据的话这个时分就需要用到StatefulWidget

16、Scaffold特点BottomNavigationBar 自界说底部导航

BottomNavigationBar 是底部导航条，能够让咱们界说底部Tab切换，bottomNavigationBar是
Scaffold组件的参数。

17、Scaffold特点FloatingActionButton完成相似闲鱼App底部导航凸起按钮

FloatingActionButton简称FAB ,能够完成起浮按钮，也能够完成相似闲鱼app的底部凸起导航

18、AppBar自界说顶部按钮图标、颜色

TabBar常见特点：

Tabbar TabBarView完成相似头条顶部导航

\\1、混入SingleTickerProviderStateMixin
class _HomePageState extends State<HomePage> with
SingleTickerProviderStateMixin{}
\\2、界说TabController
late TabController _tabController;
void initState() {
super.initState();
_tabController = TabController(length: 8, vsync: this);
_tabController.addListener(() {
if (_tabController.animation!.value == _tabController.index) {
print(_tabController.index); //获取点击或滑动页面的索引值
}
});
}

19、自界说KeepAliveWrapper 缓存页面

import 'package:flutter/material.dart';
class KeepAliveWrapper extends StatefulWidget {
const KeepAliveWrapper(
{Key? key, @required this.child, this.keepAlive = true})
: super(key: key);
final Widget? child;
final bool keepAlive;
@override
State<KeepAliveWrapper> createState() => _KeepAliveWrapperState();
}
class _KeepAliveWrapperState extends State<KeepAliveWrapper>
with AutomaticKeepAliveClientMixin {
@override
Widget build(BuildContext context) {
return widget.child!;
}
@override
bool get wantKeepAlive => widget.keepAlive;
@override
void didUpdateWidget(covariant KeepAliveWrapper oldWidget) {
if (oldWidget.keepAlive != widget.keepAlive) {
// keepAlive 状况需要更新，完成在 AutomaticKeepAliveClientMixin 中
updateKeepAlive();
}
}

20、路由

Center(
child: ElevatedButton(onPressed: (){
Navigator.of(context).push(
MaterialPageRoute(builder: (context){
return const SearchPage(title: "查找页面",);
})
);
}, child: const Text("跳转到查找页面")),
)

21、新建routers/routers.dart 配置路由

import 'package:flutter/material.dart';
import '../pages/tabs.dart';
import '../pages/search.dart';
import '../pages/form.dart';
final Map<String,Function> routes = {
'/': (contxt) => const Tabs(),
'/search': (contxt) => const SearchPage(),
'/form': (context, {arguments}) => FormPage(arguments: arguments),
};
var onGenerateRoute = (RouteSettings settings) {
// 一致处理
final String? name = settings.name;
final Function? pageContentBuilder = routes[name];
if (pageContentBuilder != null) {
if (settings.arguments != null) {
final Route route = MaterialPageRoute(
builder: (context) =>
pageContentBuilder(context, arguments: settings.arguments));
return route;
} else {
final Route route =
MaterialPageRoute(builder: (context) => pageContentBuilder(context));
return route;
}
}
return null;
};

22、Flutter 回来上一级路由

Navigator.of(context).pop();

Flutter 中替换路由；
比方咱们从用户中心页面跳转到了registerFirst页面，然后从registerFirst页面经过
pushReplacementNamed跳转到了registerSecond页面。这个时分当咱们点击registerSecond的回来
按钮的时分它会直接回来到用户中心。

Navigator.of(context).pushReplacementNamed('/registerSecond');

Flutter 回来到根路由
比方咱们从用户中心跳转到registerFirst页面，然后从registerFirst页面跳转到registerSecond页面，然
后从registerSecond跳转到了registerThird页面。这个时分咱们想的是registerThird注册成功后回来到
用户中心。 这个时分就用到了回来到根路由的办法。

Navigator.of(context).pushAndRemoveUntil(
MaterialPageRoute(builder: (BuildContext context) {
return const Tabs();
}), (route) => false);

关注大众号：Android老皮！！！欢迎大家来找我探讨交流