颤振项目中常用的布局详情,及封装和使用,快速开发项目。
<强>以及手势事件和滚动事件的使用
脚手架导航栏的实现,有些路由页可能会有抽屉菜单(抽屉)以及底部标签导航菜单等
const脚手架({
关键的关键,
this.appBar,//标题栏
this.body,//内容
this.floatingActionButton,//悬浮按钮
this.persistentFooterButtons,//底部持久化现实按钮
this.drawer,//侧滑菜单左
this.endDrawer,//侧滑菜单右
this.bottomNavigationBar,//底部导航
this.backgroundColor,//背景颜色
这一点。resizeToAvoidBottomPadding:真的,//自动适应底部填充
这一点。主:真的,//使主要用主色
})
颤振中自带的材料样式的标题栏,首先看一下AppBar具有哪些属性,代码如下:
AppBar ({
关键的关键,
this.leading,//主导小部件
这一点。automaticallyImplyLeading:没错,
this.title,//标题
this.actions,//其他附加功能
this.flexibleSpace,//伸缩空间,显示在标题上面
this.bottom,//显示在标题下面
这一点。海拔:4.0//阴影高度
this.backgroundColor,//背景颜色
this.brightness,//明暗模式
this.iconTheme,//图标主题
this.textTheme//文本主题
这一点。主:真的,//是否是用初选
this.centerTitle,//标题是否居中
这一点。titleSpacing: NavigationToolbar.kMiddleSpacing,//标题与领先的间隔
这一点。toolbarOpacity: 1.0//标题级文字透明度
这一点。bottomOpacity: 1.0//底部文字透明度
})
悬浮按钮属性详解
const FloatingActionButton ({
关键的关键,
this.child,//按钮的显示样式
this.tooltip,//提示,长按按钮提示文字
this.backgroundColor,//背景颜色
这一点。heroTag: const _DefaultHeroTag()//页面切换动画标记
这一点。海拔:6.0//阴影
这一点。highlightElevation: 12.0//高亮阴影//@ required this.onPressed,点击事件
这一点。迷你:假//是否使用小图标
})
底部导航栏BottomNavigationBar的实现,与经常搭配的pv实现项目中常用的选项卡切换
支架(
身体:页面浏览人数(
控制器:_controller,
孩子们:& lt; Widget>[//页面的页面
主页(),
SearchPage (),
TravelPage (),
MinePage (),
),>
BottomNavigationBarItem mineItem () {
返回BottomNavigationBarItem (
图标:图标(//定义默认状态下的图片以及颜色
Icons.supervised_user_circle,
颜色:_defaultColor,
)，
activeIcon:图标(//定义选中状态下的图片以及颜色
Icons.supervised_user_circle,
颜色:_activityColor,
)，
标题:文本(//定义文字
“我的”,
风格:TextStyle (
颜色:_controllerIndex !=3 & # 63;_defaultColor: _activityColor,
)，
));
}
容器
容器({
关键的关键,
this.alignment,//内部部件对齐方式
this.padding,//内边距
颜色颜色,//背景颜色,与装饰只能存在一个
装饰装修、//背景装饰,与装饰只能存在一个
this.foregroundDecoration//前景装饰,
双宽度,//容器的宽
双高度,//容器的高
BoxConstraints约束//,
this.margin,//外边距
this.transform,//倾斜
this.child,//子小部件
})
对齐:内部部件对齐方式,左上对齐topLeft,垂直顶部对齐,水平居中对齐topCenter,右上topRight,垂直居中水平左对齐centerLeft,居中对齐中心,垂直居中水平又对齐centerRight,底部左对齐bottomLeft,底部居中对齐bottomCenter,底部右对齐bottomRight
垫:内间距,距子小部件容器的距离。
颜色:背景颜色
装饰:背景装饰
foregroundDecoration:前景装饰
宽度:容器的宽
高度:容器的高
约束:容器宽高的约束,容器最终的宽高最终都要受到约束中定义的宽高影响
保证金:容器外部的间隔
变换:Matrix4变换
孩子:内部子部件
可以通过装饰装饰器实现圆角和边框,渐变等
装饰:BoxDecoration (
边界:边界(
底:
BorderSide(宽度:1,颜色:颜色(0 xfff2f2f2)))//设置底部分割线
)，
borderRadius: BorderRadius.circular(12),//设置圆角
梯度:LinearGradient (
颜色:(
颜色(0 xffff4e63),
颜色(0 xffff6cc9),
),
开始:Alignment.centerLeft,
结束:Alignment.centerRight,
)//)
