1.旅拍界面展示

2.界面布局

顶部是 TabBar 配合 TabBarView 实现页面滑动翻页

TabBarView 用 Flexible 包裹 Flexible 包裹充满整个页面

内容区部分采用 StaggeredGridView 构建瀑布流式布局，引入插件 flutter_staggered_grid_view。

自定义 LoadingContainer 在进入界面的时候弹出一个加载菊花。

通过 RefreshIndicator 控件实现下拉刷新。

通过 MediaQuery.removePadding 移除导航栏间距。

TravelPage 页面布局如下，顶部的 TabBar 切换：

///旅拍主界面
class TravelPage extends StatefulWidget {TravelPage({Key? key}) : super(key: key);@override_TravelPageState createState() => _TravelPageState();
}class _TravelPageState extends State<TravelPage>with TickerProviderStateMixin {// List<String> tabs = ["推荐", "附近", "热门", "旅行热点", "露营初体验", "酒店民宿",//   "美食探店", "亲子", "小众", "自驾", "网红", "逛展"];List<TravelTab> tabs = [];TravelTabModel? travelTabModel;late TabController _controller;@overridevoid initState() {print("TravelPage initState...");super.initState();_controller = TabController(length: tabs.length, vsync: this);_loadData();}@overrideWidget build(BuildContext context) {return Scaffold(body: Column(children: [Container(color: Colors.white,padding: const EdgeInsets.only(top: 30),child: TabBar(controller: _controller,isScrollable: true,labelColor: Colors.black,labelPadding: const EdgeInsets.fromLTRB(20, 0, 20, 5),indicator: const UnderlineTabIndicator(borderSide: BorderSide(color: Color(0xff1fcfbb), width: 3),insets: EdgeInsets.only(bottom: 10),),tabs: tabs.map<Tab>((TravelTab tab) {return Tab(text: tab.labelName);}).toList()),),Flexible(child: TabBarView(controller: _controller,children: tabs.map<TravelItemPage>((TravelTab tab) {return TravelItemPage(travelUrl: travelTabModel!.url,params: travelTabModel!.params,groupChannelCode: tab.groupChannelCode,type: tab.type,);}).toList(),))],),);}@overridevoid dispose() {_controller.dispose();super.dispose();}//初始化tab数据void _loadData() async {try {TravelTabModel model = await TravelTabDao.fetch();_controller = TabController(length: model.tabs.length, vsync: this); // fix tab label 空白问题setState(() {tabs = model.tabs;travelTabModel = model;});} catch (e) {print(e);}}
}

Body 数据展示部分布局：

最外层是一个 Card 布局，支持设置阴影，形状等，如图中的 5 所示。内部用一个PhysicalModel用于裁剪圆角等，设置裁剪透明。

内部放置一个 Column 布局，上面显示图片等，下面显示描述信息和用户信心。

如图标注 1 应该是一个 Stack 布局，放置一个 Image 和一个绝对位置的 Positioned =》放置一个 Container =》 Row =》Padding +LimitedBox

如图标注 3 是一个 Container =》Text

如图标注 4 是 Container =》 Row =》PhysicalModel + Container +Row

完整代码如下：

///构建每个小卡片的样式
class _TravelItem extends StatelessWidget {final TravelItem item;final int index;const _TravelItem({Key? key, required this.item, required this.index}): super(key: key);@overrideWidget build(BuildContext context) {return GestureDetector(onTap: () {},child: Card(child: PhysicalModel(color: Colors.transparent,child: Column(crossAxisAlignment: CrossAxisAlignment.start, //左对齐children: [_itemImage,Container(padding: const EdgeInsets.all(4),child: Text(item.article.articleTitle,maxLines: 2,overflow: TextOverflow.ellipsis,style: const TextStyle(fontSize: 14, color: Colors.black87),),),_infoText],),),),);}String _poiName() {return item.article.pois.isEmpty ? '未知' : item.article.pois[0].poiName;}///卡片布局中的图片样式，采用 Stack 控件，图片加文字等Widget get _itemImage {return Stack(children: [CachedImage(imageUrl: item.article.images[0].dynamicUrl),//在图片上方放置一个绝对位置的布局Positioned(bottom: 8,left: 8,child: Container(padding: const EdgeInsets.fromLTRB(5, 1, 5, 1),decoration: BoxDecoration(color: Colors.black54, borderRadius: BorderRadius.circular(10)),child: Row(children: [const Padding(padding: EdgeInsets.only(right: 3),child: Icon(Icons.location_on,color: Colors.white,size: 12,)),//限制子控件大小的 WidgetLimitedBox(maxWidth: 130,child: Text(_poiName(),maxLines: 1,overflow: TextOverflow.ellipsis, //尾部截断style: const TextStyle(fontSize: 12, color: Colors.white),),),],),)),]);}//图片下面的用户信息展示Widget get _infoText {return Container(padding: const EdgeInsets.fromLTRB(6, 0, 6, 8),child: Row(mainAxisAlignment: MainAxisAlignment.spaceBetween,children: [PhysicalModel(color: Colors.transparent,clipBehavior: Clip.antiAlias,borderRadius: BorderRadius.circular(12),child: CachedImage(imageUrl: item.article.author.coverImage.dynamicUrl,width: 24,height: 24,),),Container(padding: const EdgeInsets.all(5),width: 90,child: Text(item.article.author.nickName,maxLines: 1,overflow: TextOverflow.ellipsis,style: const TextStyle(fontSize: 12),),),Row(children: [const Icon(Icons.thumb_up,size: 14,color: Colors.grey,),Padding(padding: const EdgeInsets.only(left: 3),child: Text(item.article.likeCount.toString(),style: const TextStyle(fontSize: 10),),)],)],),);}
}

整个页面布局如下：

const TRAVEL_URL ='https://m.ctrip.com/restapi/soa2/16189/json/searchTripShootListForHomePageV2?_fxpcqlniredt=09031014111431397988&__gw_appid=99999999&__gw_ver=1.0&__gw_from=10650013707&__gw_platform=H5';
const PAGE_SIZE = 10;/// 旅拍视图展示界面 body 部分,瀑布流式布局
class TravelItemPage extends StatefulWidget {final String travelUrl;final Map params;final String groupChannelCode;final int type;const TravelItemPage({Key? key,required this.travelUrl,required this.params,required this.groupChannelCode,required this.type}): super(key: key);@override_TravelItemPageState createState() => _TravelItemPageState();
}class _TravelItemPageState extends State<TravelItemPage>with AutomaticKeepAliveClientMixin {//数据列表List<TravelItem> travelItems = [];//分页索引int pageIndex = 1;//是否正在加载bool _loading = true;@overridebool get wantKeepAlive => true;final ScrollController _scrollController = ScrollController();@overridevoid initState() {super.initState();_loadData();}@overridevoid dispose() {_scrollController.dispose();super.dispose();}@overrideWidget build(BuildContext context) {return Scaffold(body: LoadingContainer(isLoading: _loading,child: RefreshIndicator(onRefresh: _handleRefresh,child: MediaQuery.removePadding(context: context,child: StaggeredGridView.countBuilder(controller: _scrollController,itemCount: travelItems.length,crossAxisCount: 2,itemBuilder: (BuildContext context, int index) =>_TravelItem(index: index, item: travelItems[index]),staggeredTileBuilder: (int index) =>const StaggeredTile.fit(1)),removeTop: true,),),),);}/// 下拉刷新Future _handleRefresh() async {_loadData();}/// 加载数据,是下拉刷新还是加载更多void _loadData({loadMore = false}) async {if (loadMore) {pageIndex++;} else {pageIndex = 1;}try {TravelModel model = await TravelDao.fetch(widget.travelUrl, widget.params,widget.groupChannelCode, widget.type, pageIndex, PAGE_SIZE);setState(() {print(model.totalCount);List<TravelItem> items = model.resultList;if (travelItems.isNotEmpty) {travelItems.addAll(items);} else {travelItems = items;}_loading = false;});} catch (e) {print(e);setState(() {_loading = false;});}}
}

项目源码

源码地址：Gihut

该篇 git 提交记录为：旅拍界面布局实现。

Flutter开发学习课程携程app开发(二)相关推荐

Flutter开发学习课程携程app开发(完)
1.Flutter 列表选择器插件 1. 推荐插件:azlistview Flutter 城市列表.联系人列表,索引&悬停.基于scrollable_positioned_list.AzLis ...
Flutter开发学习课程携程app开发(一)
引言数据来源mooc网学习视频课程. 1.页面数据 1.数据展示接口地址: json 格式对应的数据界面展示效果: 2.数据请求应用Dio进行数据请求:home_dao.dart 在配置文件 ...
Flutter开发学习课程携程app开发(三)
1.效果展示需要实现的功能: 自定义一个 SearchBar, 它在主页和搜索页会呈现不同的状态显示. 在搜索框中无输入的时候显示一个语音小图标,有输入的时候显示一个清除图标. 在 HomePage ...
RN开发实践——仿携程App（二）
文章最后附上源码地址上一片博客链接RN开发实践--仿携程App(一) 实现首页的轮播图 Swiper简介 The best Swiper component for React Native.Swi ...
RN开发实践——仿携程App（三）
文章最后附上源码地址上一片博客链接RN开发实践--仿携程App(二) 实现首页中间的内容栏今天实现首页中间的内容栏,原效果如下: 红框就是今天需要实现的内容这里可以拆解成四个部分,每个部分都是由 ...
RN开发实践——仿携程App（一）
文章最后附上项目地址. 1.新建项目在控制台执行下面命令( 前提是已经搭建好react-native的开发环境 ): react-native init XieCheng // XieCheng 是 ...
干货 | 携程APP Native/RN内嵌Flutter UI混合开发实践和探索
作者简介 Deway,携程资深工程师,iOS客户端开发,热衷于大前端和动态化技术: Frank,携程高级工程师,关注移动端热门技术,安卓客户端开发. 前言随着各种多端技术的蓬勃发展,如今的移动端和前 ...
3星|《大产品，小团队》：携程软件开发流程改进的故事
大产品,小团队:携程敏捷技术与管理转型实战携程集团创作,作者有产品.开发.测试.PMO等多种角色.有一点比较怪异,每个章节的作者是放在书的最后部分的. 主要内容是携程的软件开发流程改进的故事.携程的 ...
php携程线程,携程api开发解决方法
携程api开发本帖最后由 lziyanl 于 2014-06-03 13:53:29 编辑如何获取上图的内容信息?在携程没找到对应接口,询问官方群,基本不搭理! ------解决方案------- ...

Flutter开发学习课程携程app开发(二)

1.旅拍界面展示

2.界面布局

项目源码

Flutter开发学习课程携程app开发(二)相关推荐

最新文章

热门文章