87 lines
3.1 KiB
Dart
87 lines
3.1 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:flutter_screenutil/flutter_screenutil.dart';
|
|
import 'package:get/get.dart';
|
|
import 'package:news_getx/data/model/channels.dart';
|
|
import 'package:news_getx/modules/main/main_controller.dart';
|
|
import 'package:news_getx/theme/app_colors.dart';
|
|
import 'package:news_getx/theme/app_shadows.dart';
|
|
|
|
class NewsChannelsWidget extends GetView<MainController> {
|
|
Widget _buildChannelItem(ChannelResponse item) {
|
|
return Container(
|
|
margin: EdgeInsets.symmetric(horizontal: 10),
|
|
width: 70.w,
|
|
height: 97.h,
|
|
child: InkWell(
|
|
// 没有水波纹 是有原因的 看splashColor文档 主体splashColor是透明纯黑色 所以不显示
|
|
// splashColor: Colors.cyanAccent,
|
|
onTap: () {
|
|
print(item.title);
|
|
},
|
|
child: Column(
|
|
children: [
|
|
// 当 `child` 是图片这种有具体宽高的组件时,
|
|
// 如果 `Container` 的宽高只设置期中一个,
|
|
// 则另一个的值会根据 `child` 的宽高比例计算得出,
|
|
// 如果是大于图片对应的宽高, 则图片原宽高居中显示,
|
|
// 此时 `Container` 留有空白.
|
|
// https://juejin.cn/post/7016649859008725022#heading-9
|
|
Container(
|
|
width: 64.w,
|
|
height: 64.w,
|
|
margin: EdgeInsets.symmetric(horizontal: 3.w),
|
|
// 之所以设置padding而不是居中对齐
|
|
// 是因为如果设置居中对齐的话展示的是图片本身的大小，而不是我们需要的内边距大小
|
|
padding: EdgeInsets.all(10.w),
|
|
decoration: BoxDecoration(
|
|
color: AppColors.primaryBackground,
|
|
boxShadow: [AppShadows.primaryShadow],
|
|
borderRadius: BorderRadius.all(Radius.circular(32.w)),
|
|
),
|
|
child: Image.asset(
|
|
"assets/images/channel-${item.code}.png",
|
|
fit: BoxFit.cover,
|
|
),
|
|
),
|
|
Padding(
|
|
padding: const EdgeInsets.only(top: 12.0),
|
|
child: Text(
|
|
item.title,
|
|
textAlign: TextAlign.center,
|
|
overflow: TextOverflow.clip,
|
|
maxLines: 1,
|
|
style: TextStyle(
|
|
color: AppColors.thirdElementText,
|
|
fontFamily: "Avenir",
|
|
fontWeight: FontWeight.w400,
|
|
fontSize: 14.sp,
|
|
height: 14.sp / 14,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Obx(
|
|
() => controller.state.channels == null
|
|
? Container()
|
|
: Container(
|
|
height: 137.h,
|
|
child: SingleChildScrollView(
|
|
scrollDirection: Axis.horizontal,
|
|
child: Row(
|
|
children: controller.state.channels!.map<Widget>((item) {
|
|
return _buildChannelItem(item);
|
|
}).toList(),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|