App开发之基础页面搭建

漂泊80

共 3787字,需浏览 8分钟

 ·

2020-11-17 10:53

搭建客户端基础页面


引入资源

跟目录创建assets,pubspec.yaml中引入资源

  assets:    - assets/tabs/

图片资源在阿里的confont中搜索。


创建TabsPage

import 'package:flutter/material.dart';import 'package:flutter_songbei/custom/buttom_bat_item.dart';
import '../app_theme.dart';import 'tabs/found_tab.dart';import 'tabs/home_tab.dart';import 'tabs/message_tab.dart';import 'tabs/my_tab.dart';
class TabsPage extends StatefulWidget { @override State createState() { return _TabsState(); }}
class _TabsState extends State<TabsPage> { int _selectedIndex = 0; List pages = List();

@override void initState() { super.initState(); pages..add(HomeTab())..add(FoundTab())..add(MessageTab())..add(MyTab()); }
@override Widget build(BuildContext context) { return Scaffold( bottomNavigationBar: BottomAppBar( color: Colors.white, shape: CircularNotchedRectangle(), child: Row( mainAxisAlignment: MainAxisAlignment.spaceAround, children: [ BottomBarItem(_selectedIndex == 0, 'assets/tabs/home.png', '首页', () { _onItemTapped(0); }), BottomBarItem(_selectedIndex == 1, 'assets/tabs/found.png', '发现', () { _onItemTapped(1); }), SizedBox( width: 30, ), BottomBarItem(_selectedIndex == 2, 'assets/tabs/message.png', '消息', () { _onItemTapped(2); }), BottomBarItem(_selectedIndex == 3, 'assets/tabs/my.png', '我的', () { _onItemTapped(3); }) ], ), ), body: pages[_selectedIndex], floatingActionButton: FloatingActionButton( heroTag: 'circleTag', backgroundColor: AppTheme.mainColor, child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [ Image( image: AssetImage('assets/tabs/add.png'), width: 30, height: 30, color: Colors.white, ), ]), onPressed: () {}, ), floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, ); }
void _onItemTapped(int index) { setState(() { _selectedIndex = index; }); }}


在main中设置home为TabsPage


在pages/tabs/目录下创建四个页面 HomeTab,FoundTab,MessageTab,MyTab


import 'package:flutter/material.dart';import 'package:flutter_songbei/app_theme.dart';
class HomeTab extends StatefulWidget { @override State createState() { return _PageState(); }
}
class _PageState extends State<HomeTab>{ @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('首页'), backgroundColor: AppTheme.mainColor, ), ); }}


因为底部按钮中有中间凸起按钮,所以我们采用BottomAppBar,封装BottomBarItem


import 'package:flutter/material.dart';
class BottomBarItem extends StatelessWidget{
Color actionColor = Colors.black87; Color menuColor = Color(0xff707070);
bool isSelect; String assetName; String title; Function onItem; BottomBarItem(this.isSelect,this.assetName,this.title,this.onItem); @override Widget build(BuildContext context) { return Container( padding: EdgeInsets.fromLTRB(0, 5, 0, 5), height: 60, child: InkWell( child: Column( children: [ Image( image: AssetImage(assetName), color: isSelect?actionColor:menuColor, width: 28, height: 28, ), Text(title, style: TextStyle( color:isSelect?actionColor:menuColor ) ) ], ), onTap: (){ this.onItem(); }, ), ); }
}

整体目录

运行效果

基础页面至此搭建完成

浏览 9
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报