Flutter常用的布局和事件示例详解

const Scaffold({
 Key key,
 this.appBar,//标题栏
 this.body,//内容
 this.floatingActionButton,//悬浮按钮
 this.persistentFooterButtons,//底部持久化现实按钮
 this.drawer,//侧滑菜单左
 this.endDrawer,//侧滑菜单右
 this.bottomNavigationBar,//底部导航
 this.backgroundColor,//背景颜色
 this.resizeToAvoidBottomPadding: true,//自动适应底部padding
 this.primary: true,//使用primary主色
 })

AppBar({
 Key key,
 this.leading,//主导Widget
 this.automaticallyImplyLeading: true,
 this.title,//标题
 this.actions,//其他附加功能
 this.flexibleSpace,//伸缩空间，显示在title上面
 this.bottom,//显示在title下面
 this.elevation: 4.0,//阴影高度
 this.backgroundColor,//背景颜色
 this.brightness,//明暗模式
 this.iconTheme,//icon主题
 this.textTheme,//text主题
 this.primary: true,//是否是用primary
 this.centerTitle,//标题是否居中
 this.titleSpacing: NavigationToolbar.kMiddleSpacing,//title与leading的间隔
 this.toolbarOpacity: 1.0,//title级文字透明度
 this.bottomOpacity: 1.0,//底部文字透明度
 })

const FloatingActionButton({
 Key key,
 this.child,//button的显示样式
 this.tooltip,//提示，长按按钮提示文字
 this.backgroundColor,//背景颜色
 this.heroTag: const _DefaultHeroTag(),//页面切换动画Tag
 this.elevation: 6.0,//阴影
 this.highlightElevation: 12.0,//高亮阴影
 @required this.onPressed,//点击事件
 this.mini: false//是否使用小图标
 })

Scaffold(
 body: PageView(
 controller: _controller,
 children: [//page的页面
 HomePage(),
 SearchPage(),
 TravelPage(),
 MinePage(),
 ],
 onPageChanged: (int index) {//滑动page的监听
 setState(() {//改变tab状态
 _controllerIndex = index;
 });
 },
 ),
 bottomNavigationBar: BottomNavigationBar(
 currentIndex: _controllerIndex, //当前的index
 onTap: (index) {//点击tab
 _controller.jumpToPage(index); //跳转到具体的页面
 //注意改变_controllerIndex的状态
 setState(() {
 _controllerIndex = index;
 });
 },
 type: BottomNavigationBarType.fixed,//固定
 items: [//底部tab图片、字体及颜色
 homeItem(),
 searchItem(),
 travelItem(),
 mineItem(),
 ]),
 );

BottomNavigationBarItem mineItem() {
 return BottomNavigationBarItem(
 icon: Icon(
 //定义默认状态下的图片以及颜色
 Icons.supervised_user_circle,
 color: _defaultColor,
 ),
 activeIcon: Icon(
 //定义选中状态下的图片以及颜色
 Icons.supervised_user_circle,
 color: _activityColor,
 ),
 title: Text(
 //定义文字
 '我的',
 style: TextStyle(
 color: _controllerIndex != 3 ? _defaultColor : _activityColor,
 ),
 ));
}

Container({
 	Key key,
 	this.alignment,//内部widget对齐方式
 this.padding,//内边距
 	Color color,//背景颜色，与decoration只能存在一个
 Decoration decoration,//背景装饰，与decoration只能存在一个
 this.foregroundDecoration//前景装饰,
 double width,//容器的宽
 	double height,//容器的高
 	BoxConstraints constraints//,
 	this.margin,//外边距
 	this.transform,//倾斜
 	this.child,//子widget
})

decoration: BoxDecoration(
 border: Border(
 bottom:
 BorderSide(width: 1, color: Color(0xfff2f2f2))), //设置底部分割线
 ),
 borderRadius: BorderRadius.circular(12), //设置圆角
 gradient: LinearGradient(
 colors: [
 Color(0xffff4e63),
 Color(0xffff6cc9),
 ],
 begin: Alignment.centerLeft,
 end: Alignment.centerRight,
 ), //
 )

Image.network(
 salesBoxModel.icon,
 fit: BoxFit.fill,
 height: 15,
 ),

Column({
 Key key,
 MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,//主轴X 排列方式
 MainAxisSize mainAxisSize = MainAxisSize.max,
 CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,//纵轴排列方式
 TextDirection textDirection,
 VerticalDirection verticalDirection = VerticalDirection.down,
 TextBaseline textBaseline,
 List children = const [],
 })

Row({
 Key key,
 MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
 MainAxisSize mainAxisSize = MainAxisSize.max,
 CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
 TextDirection textDirection,
 VerticalDirection verticalDirection = VerticalDirection.down,
 TextBaseline textBaseline,
 List children = const [],
 })

Padding(
 padding: EdgeInsets.only(top: 10),
 child: Text(
 model.title,
 style: TextStyle(
 fontSize: 14,
 color: Colors.white,
 ),
 ),
 )

FractionallySizedBox({
 Key key,
 this.alignment = Alignment.center,
 this.widthFactor,//设置为1 则宽度撑满父布局
 this.heightFactor,//设置为1 则高度撑满父布局
 Widget child,//包裹的子Widget
 })

Expanded({
 Key key,
 int flex = 1,
 @required Widget child,
 })

Stack({
 Key key,
 this.alignment: AlignmentDirectional.topStart,//对齐方式
 this.textDirection,
 this.fit: StackFit.loose,//是否按照父类宽高处理自己大小
 this.overflow: Overflow.clip,//溢出处理方式
 List children: const [],
 })

class LoadingWidget extends StatelessWidget {
 final bool isLoading;
 final bool cover;
 final Widget child;

 //required必须传递的参数
 const LoadingWidget(
 {Key key,
 @required this.isLoading,
 this.cover = false,
 @required this.child})
 : super(key: key);

 @override
 Widget build(BuildContext context) {
 return !cover
 ? !isLoading ? child : _loadingView
 : Stack(
 children: [child, isLoading ? _loadingView : null],
 );
 }

 Widget get _loadingView {
 return Center(
 child: CircularProgressIndicator(), //圆形的进度条
 );
 }
}

class _HomePageState extends State {
bool isLoading = true;//默认是加载中的状态
 @override
 void initState() {
 super.initState();
 _handleRefresh();
 }

 Future _handleRefresh() async {
 try {
 HomeModel model = await HomeDao.fetch();
 setState(() {
 gridNavList = model.localNavList;
 girdModeList = model.gridNav;
 subNavList = model.subNavList;
 salesBoxModel = model.salesBox;
 bannerList = model.bannerList;
 isLoading = false;
 });
 } catch (e) {
 print(e.toString());
 setState(() {
 isLoading = false;
 });
 }
 return null;
 }
 
 @override
 Widget build(BuildContext context) {
 return Scaffold(
 backgroundColor: Color(0xfff2f2f2),
 body: LoadingWidget(//使用自定义的布局
 isLoading: isLoading,
 //加载成功后显示的View
 child: Stack(
 .......
 )
 )
 );
 }
}

PageView({
 Key key,
 this.scrollDirection = Axis.horizontal,
 this.reverse = false,
 PageController controller,
 this.physics,
 this.pageSnapping = true,
 this.onPageChanged,
 List children = const [],
 this.dragStartBehavior = DragStartBehavior.down,
 }) : controller = controller ?? _defaultPageController,
 childrenDelegate = SliverChildListDelegate(children),
 super(key: key);

BottomNavigationBar({
 Key key,
 @required this.items,
 this.onTap,//点击事件
 this.currentIndex = 0,//当前的位置
 BottomNavigationBarType type,//底部固定和隐藏类型
 this.fixedColor,
 this.iconSize = 24.0,//图片的大小
 })

const BottomNavigationBarItem({
 @required this.icon,
 this.title,
 Widget activeIcon,
 this.backgroundColor,
 }) : activeIcon = activeIcon ?? icon,
 assert(icon != null);

enum BottomNavigationBarType {
 /// The [BottomNavigationBar]'s [BottomNavigationBarItem]s have fixed width, always
 /// display their text labels, and do not shift when tapped.
 fixed,

 /// The location and size of the [BottomNavigationBar] [BottomNavigationBarItem]s
 /// animate and labels fade in when they are tapped. Only the selected item
 /// displays its text label.
 shifting,
}

GestureDetector(
 onTap: () {
 CommonModel model = bannerList[index];
 Navigator.push(
 context,
 MaterialPageRoute(
 builder: (context) => WebView(
 url: model.url,
 title: model.title,
 statusBarColor: model.statusBarColor,
 hideAppBar: model.hideAppBar,
 )));
 },
 child: Image.network(bannerList[index].icon,
 fit: BoxFit.fill), //加载网络图片,
 );

NotificationListener(
 //滚动监听 list view
 onNotification: (scrollNotification) {
 //监听滚动的距离ScrollUpdateNotification 滚动时在进行回调
 if (scrollNotification is ScrollUpdateNotification &&
 scrollNotification.depth == 0) {
 //只检测listview的滚动第0个元素widget时候才开始滚动
 _scroll(scrollNotification.metrics.pixels);
 }
 },
 child: _buildListView,
 ),