Flutter 视频详情头部模块组件封装与布局技巧

最新推荐文章于 2024-06-17 09:39:02 发布

小二李

最新推荐文章于 2024-06-17 09:39:02 发布

阅读量216

点赞数

分类专栏： Flutter 文章标签： flutter android 布局技巧

本文链接：https://blog.csdn.net/weixin_43800535/article/details/123213662

版权

Flutter 专栏收录该内容

53 篇文章 1 订阅

订阅专栏

ListView 清除padding

padding: EdgeInsets.all(0)

布局技巧

为了减少嵌套，尽量将相关的Widget抽离成方法

设置圆形图片

设置技巧：图片宽和高设置为 borderRadius 的2倍

ClipRRect(
    borderRadius: BorderRadius.circular(15),
    child: Image.network(owner.face, width: 30, height: 30),
),

填充 Row、Column 剩余可用空间

使用 Flexible 或者 Expanded ， Flexible 不强制子组件填充剩余可用空间

封装视频详情头部模块组件

在这里插入图片描述

class VideoHeader extends StatelessWidget {
  final Owner owner;

  const VideoHeader({Key key, @required this.owner}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(left: 15, right: 15, top: 15),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Row(
            children: [
              // 用户头像
              ClipRRect(
                borderRadius: BorderRadius.circular(15),
                child: Image.network(owner.face, width: 30, height: 30),
              ),
              Padding(
                padding: EdgeInsets.only(left: 8),
                child: Column(
                  children: [
                    // 用户信息
                    Text(
                      owner.name,
                      style: TextStyle(
                          fontSize: 13,
                          color: primary,
                          fontWeight: FontWeight.bold),
                    ),
                    Text(
                      '${countFormat(owner.fans)}粉丝',
                      style: TextStyle(fontSize: 10, color: Colors.grey),
                    )
                  ],
                ),
              ),
            ],
          ),
          // 关注按钮
          MaterialButton(
            onPressed: () {},
            color: primary,
            height: 24,
            minWidth: 50,
            child: Text(
              '+ 关注',
              style: TextStyle(color: Colors.white, fontSize: 13),
            ),
          )
        ],
      ),
    );
  }
}