- 博客(9)
- 收藏
- 关注
原创 Flutter页面跳转Navigation和routes的基本使用
描述:1.Navigation实现页面跳转与传值2.routes路由实现页面跳转与传值内容:
2022-04-03 21:04:12 2930
原创 Flutter详解DraggableScrollableActuator
描述:调用DraggableScrollableActuator.reset(context)方法,通知子控件DraggableScrollableSheet位置到初始化状态效果图:代码:import 'package:flutter/material.dart';class DraggableScrollableActuatorPage extends StatefulWidget { const DraggableScrollableActuatorPage({Key.
2022-03-26 13:24:35 2703
原创 Flutter详解DraggableScrollableSheet可拖动和滑动的sheet
描述:使用DraggableScrollableSheet实现滑动效果效果图:代码:import 'package:flutter/material.dart';class DraggableScrollableSheetPage extends StatefulWidget { const DraggableScrollableSheetPage({Key? key}) : super(key: key); @override State<Dr
2022-03-26 12:46:26 4253
原创 Flutter拖拽组件Draggable(2)
描述:使用Draggable 实现组件的拖动效果效果图:代码:class DraggablePositionPage extends StatefulWidget { const DraggablePositionPage({Key? key}) : super(key: key); @override State<DraggablePositionPage> createState() => _DraggablePositionPageStat.
2022-03-20 20:21:06 1376
原创 Flutter拖拽组件Draggable(1)
描述:使用Draggable 和 DragTarget结合,实现组件的拖动效果效果图:代码:class DraggblePage extends StatefulWidget { const DraggblePage({Key? key}) : super(key: key); @override State<DraggblePage> createState() => _DraggblePageState();}class _Draggbl
2022-03-20 18:36:02 2244
原创 Flutter ThemeData详解
factory ThemeData({ Brightness? brightness,// //调整亮度白天模式和夜间模式 VisualDensity? visualDensity,//视觉密度 MaterialColor? primarySwatch,//Material风格的组件提供主题色 Color? primaryColor,//应用程序主要部分(工具栏、标签栏等)的背景颜色 Brightness? primaryColorBrightness,//确定放..
2022-03-17 21:56:34 1627
原创 Flutter底部导航悬浮效果BottomNavigationBar:BottomAppBar
描述:通过底部导航BottomNavigationBar:BottomAppBar实现咸鱼悬浮效果效果图:代码:class TabNav extends StatefulWidget { const TabNav({Key? key}) : super(key: key); @override State<TabNav> createState() => _TabNavState();}class _TabNavState extend.
2022-03-16 20:34:41 1357
原创 Flutter底部导航BottomNavigationBar:BottomNavigationBar实现页面的切换效果
描述:通过底部导航BottomNavigationBar实现页面的切换效果效果图:方案1 :pageView和 _pageCtr.jumpToPage(index)结合,效果只初始当前页面的索引页,其他页面需要触发之后才会渲染方案2 :IndexedStack ,效果初始化所有页面代码:class TabNav extends StatefulWidget { const TabNav({Key? key}) : super(key: key); @ov
2022-03-13 15:17:19 2366 1
原创 常用布局之CSS3弹性盒子flex布局
一. 什么是弹性盒子布局CSS3 弹性盒( Flexible Box 或 flexbox),为了让元素适配不同的屏幕大小或者说页面的大小以及设备类型时确保元素拥有恰当的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。容器通过设置 display:flex 或 inline-flex将其定义为弹性容器,默认弹性容器只有一行。二.基本样式布局代码段<!DOCTYPE html><html> <he.
2021-09-25 21:45:44 1108
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人