在Flutter中实现图示界面设计应使用哪些Widget？

整体框架与导航 #

• Scaffold：页面基础容器，用来承载顶部导航栏、主体内容和底部导航栏
• AppBar：实现顶部导航栏，可配置标题、左侧返回按钮
• BottomNavigationBar：打造底部的首页、分类、购物车、我的这几个导航选项

头部搜索区 #

• Container：包裹搜索框，用来设置背景色和圆角样式
• TextField：实现搜索输入功能，用InputDecoration配置搜索图标、提示文字
• IconButton：添加搜索框右侧的扫码图标

分类标签栏 #

• SingleChildScrollView：设置水平滚动，让分类标签支持左右滑动查看
• Row：横向排列所有分类标签
• GestureDetector：给每个标签加点击事件，用来切换选中状态
• Container：包裹标签文字，通过背景色变化区分选中和未选中的标签

商品网格列表 #

• GridView.builder：构建商品网格布局，适合动态加载大量商品数据
• Card：每个商品项的容器，自带圆角和阴影效果
• Column：垂直排列商品图片、名称、价格等信息
• Image.network：加载商品的网络图片
• Text：展示商品名称、价格，通过style设置字体大小、颜色，区分现价和原价

辅助布局Widget #

• Padding：给各个区域添加内边距，调整元素间距
• SizedBox：设置固定宽高，控制元素间的空白间隔
• Opacity：给原价添加半透明效果，打造打折样式

内容的提问来源于stack exchange，提问作者Minal Suryawanshi