Flutter项目之table页面实现

news/2025/4/1 2:30:48/

目录：

    • 1、首页页面
      • index.dart（首页table页面）
      • searchbar.dart (搜索页面)
      • common_swiper.dart (轮播图)
      • index_navigation.dart (导航区域)
      • index_navigatorItem_list.dart (数组构造)
    • 2、房屋推荐
      • index_recommond.dart (房屋推荐区域)
      • IndexRecommendItem.dart （构造数据）
      • IndexRecommondWidget.dart （点击图片的处理逻辑）

1、首页页面

效果图：

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

index.dart（首页table页面）

import 'package:flutter/material.dart';
import 'package:flutter_haoke/pages/home/info/index.dart';
import 'package:flutter_haoke/pages/home/tab_index/index_navigation.dart';
import 'package:flutter_haoke/pages/home/tab_index/index_recommond.dart';
import 'package:flutter_haoke/widget/common_swiper.dart';
import 'package:flutter_haoke/widget/search_bar/index.dart';class TabIndex extends StatelessWidget {const TabIndex({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(automaticallyImplyLeading: false,title: SearchBar(showLocation: true,showMap: true,onSearch: () {Navigator.of(context).pushNamed("search");},),backgroundColor: Colors.white,),body: ListView(children: [CommonSwiper(),IndexNavigation(),IndexRecommond(),Info(showTitle: true,),],),);}
}

searchbar.dart (搜索页面)

import 'dart:convert';import 'package:city_pickers/city_pickers.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_haoke/config.dart';
import 'package:flutter_haoke/pages/home/tab_index/index_recommond_item.dart';
import 'package:flutter_haoke/scopoed_model/city.dart';
import 'package:flutter_haoke/utils/common_toast.dart';
import 'package:flutter_haoke/utils/model/general_type.dart';
import 'package:flutter_haoke/utils/scopoed_mode_helper.dart';
import 'package:flutter_haoke/utils/store.dart';class SearchBar extends StatefulWidget {final bool? showLocation; //是否显示位置final void Function()? goBackCallback; //回退final String? inputValue; //搜索框值final String? defaultInputValue; //默认显示值final void Function()? onCancel; //取消按钮final bool? showMap; //是否显示地图按钮final void Function()? onSearch; //点击搜索框触发// final Function? onSearch;final ValueChanged<String>? onSearchSubmit; //点击按键回车触发const SearchBar({Key? key,this.showLocation,this.goBackCallback,this.inputValue = '',this.defaultInputValue = '请输入搜索词',this.onCancel,this.showMap,this.onSearch,this.onSearchSubmit}): super(key: key);@override_SearchBarState createState() => _SearchBarState();
}class _SearchBarState extends State<SearchBar> {String _searchWord = '';late TextEditingController _controller;late FocusNode _focus;_onClean() {_controller.clear();setState(() {_searchWord = '';});}_onChangeLocation() async {//打开第三方的选择页面var resultCity = await CityPickers.showCitiesSelector(context: context, theme: ThemeData(primarySwatch: Colors.green));//选择之后返回选择的数据String? cityName = resultCity!.cityName;if (cityName == null) return;//检测选中的城市是否在 四个城市中//查找数组中是否有这个名字 有就返回这个城市model 没有就返回空的类var city = Config.availableCitys.firstWhere((city) => cityName.startsWith(city.name), orElse: () {CommontToast.showToast("该城市暂未开通！");return GeneralType('', "");});//保存选中的城市_saveCity(city);}_saveCity(GeneralType city) async {if (city.name == null ||city.name =="") return;//保存到全局ScopoedModelHelper.getModel<CityModel>(context).city = city;//保存到本地var store = await Store.getInstance();//转化成json字符串格式var cityString = json.encode(city.toJson());store.setString(StoreKeys.city, cityString);}@overridevoid initState() {_focus = FocusNode();_controller = TextEditingController(text: widget.inputValue);super.initState();}@overrideWidget build(BuildContext context) {//从全局里拿到cityvar city = ScopoedModelHelper.getModel<CityModel>(context).city;if (city.name == null || city.name == "") {city = Config.availableCitys.first;//存储下此时的city_saveCity(city);}return Container(child: Row(children: [if (widget.showLocation != null)Padding(padding: EdgeInsets.only(right: 10),child: GestureDetector(onTap: () {_onChangeLocation();},child: Row(children: [Icon(Icons.room,color: Colors.green,size: 15,),Text(city.name,style: TextStyle(color: Colors.black, fontSize: 14),)],),),),if (widget.goBackCallback != null)Padding(padding: EdgeInsets.only(right: 10),child: GestureDetector(onTap: widget.goBackCallback,child: Icon(Icons.chevron_left,color: Colors.black,)),),Expanded(child: Container(height: 34,decoration: BoxDecoration(color: Colors.grey.shade100,borderRadius: BorderRadius.circular(17)),margin: EdgeInsets.only(right: 10),child: TextField(focusNode: _focus,controller: _controller,style: TextStyle(fontSize: 14),onChanged: (value) {setState(() {_searchWord = value;});},onTap: () {//判断没有使用搜索功能则失去焦点if (null == widget.onSearchSubmit) {_focus.unfocus();}if(widget.onSearch !=null)widget.onSearch!();},onSubmitted: widget.onSearchSubmit,textInputAction: TextInputAction.search,decoration: InputDecoration(hintText: widget.defaultInputValue,hintStyle: TextStyle(color: Colors.black, fontSize: 14),contentPadding: EdgeInsets.only(top: 2, left: -10),border: InputBorder.none,icon: Padding(padding: EdgeInsets.only(top: 4, left: 8),child: Icon(Icons.search,size: 18,color: Colors.grey,),),suffixIcon: GestureDetector(onTap: _onClean,child: Icon(Icons.clear,size: 18,color:_searchWord == '' ? Colors.grey.shade100 : Colors.grey,),)),),)),if (widget.onCancel != null)Padding(padding: EdgeInsets.only(right: 10),child: GestureDetector(onTap: widget.onCancel,child: Text("取消",style: TextStyle(color: Colors.black, fontSize: 14),),),),if (widget.showMap != null)Image.asset("static/icons/widget_search_bar_map.png")],));}
}

common_swiper.dart (轮播图)

import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';const List<String> defaultImages = ['http://ww3.sinaimg.cn/large/006y8mN6ly1g6e2tdgve1j30ku0bsn75.jpg','http://ww3.sinaimg.cn/large/006y8mN6ly1g6e2whp87sj30ku0bstec.jpg','http://ww3.sinaimg.cn/large/006y8mN6ly1g6e2tl1v3bj30ku0bs77z.jpg',
];
// 图片宽高 1200 800
const imageWidth = 1200.0;
const imageHeight = 800;class CommonSwiper extends StatelessWidget {final List<String> images;const CommonSwiper({Key? key, this.images = defaultImages}) : super(key: key);@overrideWidget build(BuildContext context) {var heigth = MediaQuery.of(context).size.width / imageWidth * imageHeight;return Container(height: heigth,child: Swiper(itemBuilder: (context, index) {//Image.network网络图片，前提需开启网络权限return Image.network(images[index], fit: BoxFit.fill);},itemCount: images.length,autoplay: true,),);}
}

index_navigation.dart (导航区域)

import 'package:flutter/material.dart';
import 'index_navigation_item.dart';class IndexNavigation extends StatelessWidget {const IndexNavigation({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return Container(child: Padding(
//‌EdgeInsets‌是Flutter中用于定义组件的填充和边距的一个类。它提供了几种便捷的方法来设置组件的填充值，包括：
‌//EdgeInsets.fromLTRB(double left, double top, double right, double bottom)‌：分别指定四个方向的填充值。
//EdgeInsets.all(double value)‌：所有方向使用相同数值的填充。
//EdgeInsets.only({left, top, right, bottom})‌：可以设置具体某个方向的填充（可以同时指定多个方向）。
//EdgeInsets.symmetric({vertical, horizontal})‌：用于设置对称方向的填充，vertical指top和bottom，horizontal指left和right‌padding: const EdgeInsets.only(top: 10, bottom: 10),child: Row(mainAxisAlignment: MainAxisAlignment.spaceAround,children: indexNavigatorItemList.map((item) => InkWell(child: Column(children: [Image.asset(item.imageUrl, width: 40),Text(item.title,style: TextStyle(fontWeight: FontWeight.w500, fontSize: 14.0),)],),onTap: () {item.onTap(context);},)).toList(),),),);}
}

index_navigatorItem_list.dart (数组构造)

import 'package:flutter/material.dart';//准备数据:title,image
class IndexNavigatorItem {final String title;final String imageUrl;final Function (BuildContext contenxt) onTap;IndexNavigatorItem(this.title,this.imageUrl,this.onTap);
}List<IndexNavigatorItem> indexNavigatorItemList=[IndexNavigatorItem('整租','static/images/home_index_navigator_total.png',(BuildContext context){Navigator.of(context).pushNamed('login');}),IndexNavigatorItem('合租','static/images/home_index_navigator_share.png',(BuildContext context){Navigator.of(context).pushNamed('login');}),IndexNavigatorItem('地图找房','static/images/home_index_navigator_map.png',(BuildContext context){Navigator.of(context).pushNamed('login');}),IndexNavigatorItem('去出租','static/images/home_index_navigator_rent.png',(BuildContext context){Navigator.of(context).pushNamed('login');}),
];

2、房屋推荐

在这里插入图片描述

index_recommond.dart (房屋推荐区域)

import 'package:flutter/material.dart';
import 'package:flutter_haoke/pages/home/tab_index/index_recommond_data.dart';
import 'package:flutter_haoke/pages/home/tab_index/index_recommond_item.dart';class IndexRecommond extends StatelessWidget {final List<IndexRecommendItem> dataList;const IndexRecommond({Key? key, this.dataList = indexRecommendData}): super(key: key);@overrideWidget build(BuildContext context) {return Container(padding: EdgeInsets.all(10),decoration: BoxDecoration(color: Color(0x08000000)),child: Column(children: [Row(mainAxisAlignment: MainAxisAlignment.spaceBetween,children: [Text("房屋推荐",style: TextStyle(fontSize: 14.0, fontWeight: FontWeight.w500),),Text("更多")],),Padding(padding: EdgeInsets.all(10)),Wrap(spacing: 10,runSpacing: 10,children: dataList.map((item) {return IndexRecommondWidget(item);}).toList(),)],),);}
}

IndexRecommendItem.dart （构造数据）

class IndexRecommendItem{final String title;final String subTitle;final String imageUrl;final String navigateUrl;const IndexRecommendItem(this.title,this.subTitle,this.imageUrl,this.navigateUrl);
}const List<IndexRecommendItem> indexRecommendData=[const IndexRecommendItem('家住回龙观','归属的感觉', 'static/images/home_index_recommend_1.png', 'login'),const IndexRecommendItem('宜居四五环', '大都市生活','static/images/home_index_recommend_2.png', 'login'),const IndexRecommendItem('喧嚣三里屯', '繁华的背后','static/images/home_index_recommend_3.png', 'login'),const IndexRecommendItem('比邻十号线','地铁心连心', 'static/images/home_index_recommend_4.png', 'login'),
];

IndexRecommondWidget.dart （点击图片的处理逻辑）

import 'dart:ui';import 'package:flutter/material.dart';
import 'package:flutter_haoke/pages/home/tab_index/index_recommond_data.dart';var textStyle = TextStyle(fontSize: 14.0, fontWeight: FontWeight.w600);class IndexRecommondWidget extends StatelessWidget {final IndexRecommendItem data;const IndexRecommondWidget(this.data, {Key? key,}) : super(key: key);@overrideWidget build(BuildContext context) {return GestureDetector(onTap: () {Navigator.of(context).pushNamed(data.navigateUrl);},child: Container(padding: EdgeInsets.all(10),decoration: BoxDecoration(color: Colors.white),width: (MediaQuery.of(context).size.width - 10 * 3) / 2,height: 100,child: Row(mainAxisAlignment: MainAxisAlignment.spaceAround,children: [Column(mainAxisAlignment: MainAxisAlignment.center, children: [Text(data.title,style: textStyle,),Text(data.subTitle,style: textStyle,)]),// Image.asset展示的本地图片Image.asset(data.imageUrl,width: 40,)],),),);}
}

http://www.ppmy.cn/news/1584023.html

相关文章

Git 基础入门：从概念到实践的版本控制指南

Git 基础入门：从概念到实践的版本控制指南

一、Git 核心概念解析 1. 仓库&#xff08;Repository&#xff09; Git 的核心存储单元&#xff0c;包含项目所有文件及其完整历史记录。分为本地仓库&#xff08;开发者本地副本&#xff09;和远程仓库&#xff08;如 GitHub、GitLab 等云端存储&#xff09;&#xff0c;支持…
阅读更多...
蓝桥杯嵌入式第十二届程序设计题

蓝桥杯嵌入式第十二届程序设计题

一、题目概览 设计一个小型停车计费系统 二、分模块实现 1、LCD void disp_proc() {if(view0){char text[30];sprintf(text," Data");LCD_DisplayStringLine(Line2,(uint8_t *)text);sprintf(text," CNBR:%d ",Cnum);LCD_DisplayStri…
阅读更多...
SpringBoot中WebMvcConfigurer注册多个拦截器（addInterceptors）时的顺序问题（二）

SpringBoot中WebMvcConfigurer注册多个拦截器（addInterceptors）时的顺序问题（二）

在Spring MVC的拦截器&#xff08;Interceptor&#xff09;中&#xff0c;preHandle、postHandle 和 afterCompletion 这三个方法的执行顺序与整个请求-响应流程密切相关。以下是它们的详细执行顺序和触发时机&#xff1a; 1. 完整执行顺序流程图 客户端请求 → Interceptor1.…
阅读更多...
TraeAI结合Proteus实现AI编程并仿真一个复杂工业物联网控制系统的开发（视频）

TraeAI结合Proteus实现AI编程并仿真一个复杂工业物联网控制系统的开发（视频）

简介&#xff1a; 本视频聚焦基于国内首个 AI 原生集成开发环境&#xff08;AI IDE&#xff09;的 AI 编程实践。借助提示词&#xff0c;在 Proteus 环境下结合 ESP32 - S3&#xff0c;运用 MicroPython 进行状态机程序设计。展示如何通过在Trae CN人工智能集成编程开发环境&am…
阅读更多...
蓝桥杯备考：BFS之马的遍历

蓝桥杯备考：BFS之马的遍历

这道题我们得知道象棋里的马能怎么走,应该是按日字走的 如图&#xff0c;就这么走&#xff0c;我们按基础的bfs遍历一下标记每个格子的最短的路径就行了&#xff0c;没到达的格子就设置为-1 #include <iostream> #include <queue> #include <cstring> using…
阅读更多...
Python与文件——保存文件

Python与文件——保存文件

1.以下关于Python二维数据的描述中,错误的是()。 A、CSV文件的每一行是一维数据,可以用列表、元组表示。 B、从CSV文件获得数据内容后,可以用replace()来去掉每行最后的换行符。 C、若一个列表变量里的元素都是字符串类型,则可以用join()合成字符串。 D、列表中保存的二维数据,…
阅读更多...
MySQL 的 JSON 查询

MySQL 的 JSON 查询

MySQL 的 JSON 路径格式 MySQL 使用特定的 JSON 路径表达式语法来导航和提取 JSON 文档中的数据 基本结构 MySQL 中的 JSON 路径遵循以下通用格式 $[路径组件]路径组件详解 | 操作符 | 描述 | 示例 | | ----------- | --------- | ----------…
阅读更多...
HarmonyOS WebSocket全场景应用开发深度解析

HarmonyOS WebSocket全场景应用开发深度解析

注&#xff1a;适用版本&#xff08;Harmony OS NEXT / 5.0 / API 12 &#xff09; 一、最终效果预览 二、基础代码结构 Entry Component struct ChatApp {State messages: Message[] [] // 所有聊天记录State inputText: string "" // 输入框内容State isCon…
阅读更多...
最新文章

Copyright @ 2022~2023