flutter - 容器中的可扩展文本

Question

我有一个容器来显示用户的评论。容器有一些属性，比如头像、评分等。在容器的底部我想放评论文本，如果太长，做一个“阅读更多”/“阅读更少”按钮并调整容器的大小。这是我正在使用的代码：

Container(
     height: 500.0,
     width: double.infinity,
     child: ReviewListWidget(userProfile: userProfile),
)

Some constrais...

class ReviewListWidget extends StatefulWidget {
  final UserProfile userProfile;

  const ReviewListWidget({
    @required this.userProfile,
  });

  @override
  _ReviewListWidgetState createState() => _ReviewListWidgetState();
}

class _ReviewListWidgetState extends State<ReviewListWidget> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return _buildView(context);
  }

  void onTapReadMore(bool _flag) {
    setState(() => _flag = !_flag);
  }

  Widget _buildView(BuildContext context) {
    final Size size = MediaQuery.of(context).size;
    String firstHalf;
    String secondHalf;
    bool _flag = true;

    return ListView.builder(
      scrollDirection: Axis.horizontal,
      physics: BouncingScrollPhysics(),
      controller: ScrollController(),
      itemCount: widget.userProfile.reviews.length,
      itemBuilder: (_, i) {
        final review = widget.userProfile.reviews[i];

        //Logic to make the body review expandable
        if (review.bodyReview.length > 150) {
          firstHalf = review.bodyReview.substring(0, 150);
          secondHalf =
              review.bodyReview.substring(150, review.bodyReview.length);
        } else {
          firstHalf = review.bodyReview;
          secondHalf = "";
        }

        return Container(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(...Here Goes the profile picture, etc.),
              SizedBox(height: 12),
              
              secondHalf.isEmpty
                  ? Text(firstHalf)
                  : Column(
                      children: <Widget>[
                        new Text(_flag
                            ? (firstHalf + "...")
                            : (firstHalf + secondHalf)),
                        new InkWell(
                          child: new Row(
                            mainAxisAlignment: MainAxisAlignment.end,
                            children: <Widget>[
                              new Text(
                                _flag ? "Read more" : "Read less",
                                style: new TextStyle(color: Colors.blue),
                              ),
                            ],
                          ),
                          onTap: () => onTapReadMore(_flag),
                        ),
                       ],
                      ),
                   );
      },
    );
  }
}

这个实现的问题是当我按下按钮时 _flag 的值没有被更新。

Answer 1

您必须将_flag变量放入类中，否则_buildView方法将true在每次构建时创建一个具有值的新变量。因此，代码应如下所示：

class _ReviewListWidgetState extends State<ReviewListWidget> {
  bool _flag = true;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return _buildView(context);
  }

  void onTapReadMore() {
    setState(() => _flag = !_flag);
  }

  Widget _buildView(BuildContext context) {
    final Size size = MediaQuery.of(context).size;
    String firstHalf;
    String secondHalf;

    return ListView.builder(
      scrollDirection: Axis.horizontal,
      physics: BouncingScrollPhysics(),
      controller: ScrollController(),
      itemCount: widget.userProfile.reviews.length,
      itemBuilder: (_, i) {
        final review = widget.userProfile.reviews[i];

        //Logic to make the body review expandable
        if (review.bodyReview.length > 150) {
          firstHalf = review.bodyReview.substring(0, 150);
          secondHalf =
              review.bodyReview.substring(150, review.bodyReview.length);
        } else {
          firstHalf = review.bodyReview;
          secondHalf = "";
        }

        return Container(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(...Here Goes the profile picture, etc.),
              SizedBox(height: 12),
              
              secondHalf.isEmpty
                  ? Text(firstHalf)
                  : Column(
                      children: <Widget>[
                        new Text(_flag
                            ? (firstHalf + "...")
                            : (firstHalf + secondHalf)),
                        new InkWell(
                          child: new Row(
                            mainAxisAlignment: MainAxisAlignment.end,
                            children: <Widget>[
                              new Text(
                                _flag ? "Read more" : "Read less",
                                style: new TextStyle(color: Colors.blue),
                              ),
                            ],
                          ),
                          onTap: () => onTapReadMore(),
                        ),
                       ],
                      ),
                   );
      },
    );
  }
}