|
|
@@ -27,91 +27,109 @@ class OptionSelectWidget extends StatelessWidget {
|
|
|
|
|
|
@override
|
|
|
Widget build(BuildContext context) {
|
|
|
- return Column(
|
|
|
- crossAxisAlignment: CrossAxisAlignment.start,
|
|
|
- children: [
|
|
|
- // 标题
|
|
|
- _buildTitle(),
|
|
|
- SizedBox(height: 16.h),
|
|
|
- // 选项
|
|
|
- _buildOptionList(),
|
|
|
- ],
|
|
|
+ return SizedBox(
|
|
|
+ // 宽度匹配父组件
|
|
|
+ width: double.infinity,
|
|
|
+ child: Column(
|
|
|
+ crossAxisAlignment: CrossAxisAlignment.start,
|
|
|
+ children: [
|
|
|
+ // 标题
|
|
|
+ _buildTitle(),
|
|
|
+ // 选项
|
|
|
+ _buildOptionList(),
|
|
|
+ ],
|
|
|
+ ),
|
|
|
);
|
|
|
}
|
|
|
|
|
|
/// 图标和标题
|
|
|
Widget _buildTitle() {
|
|
|
String icon = optionSelect.iconUrl;
|
|
|
- return Row(
|
|
|
- children: [
|
|
|
- Visibility(
|
|
|
- visible: icon.isNotEmpty,
|
|
|
- child: Row(
|
|
|
- children: [
|
|
|
- // 图标
|
|
|
- CachedNetworkImage(
|
|
|
- imageUrl: icon,
|
|
|
- height: 14.h,
|
|
|
- width: 14.w,
|
|
|
- fit: BoxFit.fill,
|
|
|
+ String title = optionSelect.title;
|
|
|
+ // 是否不显示标题
|
|
|
+ bool isNotTitle = icon.isEmpty && title.isEmpty;
|
|
|
+ return Visibility(
|
|
|
+ visible: !isNotTitle,
|
|
|
+ child: Container(
|
|
|
+ margin: EdgeInsets.only(bottom: 16.h),
|
|
|
+ child: Row(
|
|
|
+ children: [
|
|
|
+ Visibility(
|
|
|
+ visible: icon.isNotEmpty,
|
|
|
+ child: Row(
|
|
|
+ children: [
|
|
|
+ // 图标
|
|
|
+ CachedNetworkImage(
|
|
|
+ imageUrl: icon,
|
|
|
+ height: 14.h,
|
|
|
+ width: 14.w,
|
|
|
+ fit: BoxFit.fill,
|
|
|
+ ),
|
|
|
+ SizedBox(width: 2),
|
|
|
+ ],
|
|
|
),
|
|
|
- SizedBox(width: 2),
|
|
|
- ],
|
|
|
- ),
|
|
|
- ),
|
|
|
- // 标题
|
|
|
- Text(
|
|
|
- optionSelect.title,
|
|
|
- style: TextStyle(
|
|
|
- fontSize: 14.sp,
|
|
|
- fontWeight: FontWeight.w700,
|
|
|
- color: ColorName.black80,
|
|
|
- ),
|
|
|
+ ),
|
|
|
+ // 标题
|
|
|
+ Visibility(
|
|
|
+ visible: title.isNotEmpty,
|
|
|
+ child: Text(
|
|
|
+ optionSelect.title,
|
|
|
+ style: TextStyle(
|
|
|
+ fontSize: 14.sp,
|
|
|
+ fontWeight: FontWeight.w700,
|
|
|
+ color: ColorName.black80,
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ ],
|
|
|
),
|
|
|
- ],
|
|
|
+ ),
|
|
|
);
|
|
|
}
|
|
|
|
|
|
/// 选项列表
|
|
|
Widget _buildOptionList() {
|
|
|
- // 固定一行3列,每项的宽度一样
|
|
|
- return GridView.builder(
|
|
|
- // 去掉默认的Padding,默认会有一个默认的顶部padding大小
|
|
|
- padding: EdgeInsets.zero,
|
|
|
- // 包裹内容
|
|
|
- shrinkWrap: true,
|
|
|
- // 禁止滚动
|
|
|
- physics: const NeverScrollableScrollPhysics(),
|
|
|
- gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
|
|
|
- // 一行3列
|
|
|
- crossAxisCount: 3,
|
|
|
- // 水平方向的间距
|
|
|
- crossAxisSpacing: 6.0,
|
|
|
- // 垂直方向的间距
|
|
|
- mainAxisSpacing: 12.0,
|
|
|
- // 子项的宽高比
|
|
|
- childAspectRatio: 2.6,
|
|
|
- ),
|
|
|
- itemCount: optionSelect.options.length,
|
|
|
- itemBuilder: (context, index) {
|
|
|
- OptionSelectItem option = optionSelect.options[index];
|
|
|
- return _buildOptionItem(optionSelect, option);
|
|
|
- },
|
|
|
- );
|
|
|
-
|
|
|
// 流式布局,类似安卓的FlowLayout,1列不固定3个,放不下就自动换行
|
|
|
- // return Wrap(
|
|
|
- // direction: Axis.horizontal,
|
|
|
- // alignment: WrapAlignment.start,
|
|
|
- // // 主轴间距
|
|
|
- // spacing: 8.0,
|
|
|
- // // 交叉轴间距
|
|
|
- // runSpacing: 7.0,
|
|
|
- // children: [
|
|
|
- // for (var option in optionSelect.options)
|
|
|
- // _buildOptionItem(optionSelect, option),
|
|
|
- // ],
|
|
|
- // );
|
|
|
+ if (optionSelect.isCustom) {
|
|
|
+ return Wrap(
|
|
|
+ direction: Axis.horizontal,
|
|
|
+ alignment: WrapAlignment.start,
|
|
|
+ runAlignment: WrapAlignment.start,
|
|
|
+ // 主轴间距
|
|
|
+ spacing: 6.0,
|
|
|
+ // 交叉轴间距
|
|
|
+ runSpacing: 7.0,
|
|
|
+ children: [
|
|
|
+ for (var option in optionSelect.options)
|
|
|
+ _buildOptionItem(optionSelect, option),
|
|
|
+ ],
|
|
|
+ );
|
|
|
+ } else {
|
|
|
+ // 固定一行3列,每项的宽度一样
|
|
|
+ return GridView.builder(
|
|
|
+ // 去掉默认的Padding,默认会有一个默认的顶部padding大小
|
|
|
+ padding: EdgeInsets.zero,
|
|
|
+ // 包裹内容
|
|
|
+ shrinkWrap: true,
|
|
|
+ // 禁止滚动
|
|
|
+ physics: const NeverScrollableScrollPhysics(),
|
|
|
+ gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
|
|
|
+ // 一行3列
|
|
|
+ crossAxisCount: 3,
|
|
|
+ // 水平方向的间距
|
|
|
+ crossAxisSpacing: 6.0,
|
|
|
+ // 垂直方向的间距
|
|
|
+ mainAxisSpacing: 12.0,
|
|
|
+ // 子项的宽高比
|
|
|
+ childAspectRatio: 2.6,
|
|
|
+ ),
|
|
|
+ itemCount: optionSelect.options.length,
|
|
|
+ itemBuilder: (context, index) {
|
|
|
+ OptionSelectItem option = optionSelect.options[index];
|
|
|
+ return _buildOptionItem(optionSelect, option);
|
|
|
+ },
|
|
|
+ );
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
/// 选项
|
|
|
@@ -145,27 +163,39 @@ class OptionSelectWidget extends StatelessWidget {
|
|
|
);
|
|
|
}
|
|
|
|
|
|
+ Widget textWidget = Text(
|
|
|
+ optionItem.name,
|
|
|
+ textAlign: TextAlign.center,
|
|
|
+ maxLines: 1,
|
|
|
+ style: TextStyle(
|
|
|
+ overflow: TextOverflow.ellipsis,
|
|
|
+ fontSize: 13.sp,
|
|
|
+ fontWeight: FontWeight.w400,
|
|
|
+ // 文字颜色,选中时为白色,未选中时为黑色
|
|
|
+ color: optionItem.selected ? ColorName.white : ColorName.black80,
|
|
|
+ ),
|
|
|
+ );
|
|
|
+
|
|
|
+ Widget contentWidget;
|
|
|
+ if (rowConfig.isCustom) {
|
|
|
+ // 自定义,通过Wrap来实现,子项的宽度由自己的内容撑开,通过padding来撑大左右宽度
|
|
|
+ contentWidget = Container(
|
|
|
+ padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 6.h),
|
|
|
+ decoration: bgDecoration,
|
|
|
+ child: textWidget,
|
|
|
+ );
|
|
|
+ } else {
|
|
|
+ // 非自定义,通过GridView来实现,每个子项会平分宽度,通过Center来居中文字
|
|
|
+ contentWidget = Container(
|
|
|
+ decoration: bgDecoration,
|
|
|
+ child: Center(child: textWidget),
|
|
|
+ );
|
|
|
+ }
|
|
|
return GestureDetector(
|
|
|
onTap: () {
|
|
|
optionSelectCallback(rowConfig, optionItem);
|
|
|
},
|
|
|
- child: Container(
|
|
|
- // padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 6.h),
|
|
|
- decoration: bgDecoration,
|
|
|
- child: Center(
|
|
|
- child: Text(
|
|
|
- optionItem.name,
|
|
|
- maxLines: 1,
|
|
|
- style: TextStyle(
|
|
|
- overflow: TextOverflow.ellipsis,
|
|
|
- fontSize: 13.sp,
|
|
|
- fontWeight: FontWeight.w400,
|
|
|
- // 文字颜色,选中时为白色,未选中时为黑色
|
|
|
- color: optionItem.selected ? ColorName.white : ColorName.black80,
|
|
|
- ),
|
|
|
- ),
|
|
|
- ),
|
|
|
- ),
|
|
|
+ child: contentWidget,
|
|
|
);
|
|
|
}
|
|
|
}
|