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.itying.com/images/flutter/3.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老皮！！！欢迎大家来找我探讨交流👀