Flutter如何实现电影描述文本的展开与收起功能

嘿，这个需求我之前在项目里实现过，完全不用依赖jQuery插件，用React的状态管理配合CSS就能轻松搞定。下面给你一个完整的、可复用的方案：

核心思路 #

1. 用React的useState来控制描述文本的展开/收起状态
2. 借助CSS的-webkit-line-clamp属性实现多行文本截断，初始只显示指定行数
3. 判断文本是否超出截断行数，动态显示「更多…」/「收起…」按钮

完整代码实现 #

第一步：创建可复用的电影描述组件

import { useState, useEffect, useRef } from 'react';

const MovieDescription = ({ description }) => {
  // 控制展开状态
  const [isExpanded, setIsExpanded] = useState(false);
  // 判断是否需要显示切换按钮
  const [showToggle, setShowToggle] = useState(false);
  // 获取文本元素的Ref，用于判断是否溢出
  const textRef = useRef(null);

  useEffect(() => {
    if (textRef.current) {
      // 对比元素的滚动高度和可见高度，判断是否溢出
      const isOverflowing = textRef.current.scrollHeight > textRef.current.clientHeight;
      setShowToggle(isOverflowing);
    }
  }, [description]);

  return (
    <div className="movie-description-container">
      <p 
        ref={textRef}
        className={`description-text ${isExpanded ? '' : 'truncated'}`}
      >
        {description}
      </p>
      {/* 只有文本溢出时才显示按钮 */}
      {showToggle && (
        <button 
          onClick={() => setIsExpanded(!isExpanded)}
          className="toggle-button"
        >
          {isExpanded ? '收起…' : '更多…'}
        </button>
      )}
    </div>
  );
};

export default MovieDescription;

第二步：在你的Container组件中使用

// 假设你的Container组件接收movie对象作为props
const Container = ({ movie }) => {
  return (
    <div className="movie-container">
      <h2>{movie.title}</h2>
      {/* 引入电影描述组件 */}
      <MovieDescription description={movie.description} />
      {/* 其他电影信息（比如海报、评分等） */}
    </div>
  );
};

第三步：添加CSS样式

.movie-description-container {
  margin: 1.5rem 0;
}

.description-text {
  margin: 0 0 0.8rem 0;
  line-height: 1.6;
  font-size: 1rem;
}

/* 多行截断样式 */
.truncated {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 初始显示3行，可根据需求调整 */
  -webkit-box-orient: vertical;
}

.toggle-button {
  background: transparent;
  border: none;
  color: #0071e3; /* 用类似苹果的蓝色，你可以换成自己的主题色 */
  cursor: pointer;
  padding: 0;
  font-size: inherit;
}

.toggle-button:hover {
  text-decoration: underline;
}

额外说明 #

• webkit-line-clamp是现代浏览器广泛支持的属性，如果你需要兼容极老的浏览器（比如IE），可以用JS计算文本高度的方案，但一般来说这个属性足够日常使用。
• 用useRef结合scrollHeight和clientHeight判断文本是否溢出的逻辑，比单纯用字符数判断更准确，能适配不同字体大小、行高的场景。
• 按钮的样式可以完全根据你的项目主题调整，比如改成链接样式或者带背景的按钮。

内容的提问来源于stack exchange，提问作者Tushar Pol