flutter - 渲染帧在滚动多个图像时变得疯狂

Question

您好，我尝试做类似Instagram Stories的操作，但是当我使用6张以上的图片时，Android Studio的Flutter Performance就会发疯，我的PC也发疯。我想知道是否有阻止它的方法。

主小部件

class Story extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: Row(
        children: <Widget>[
          AddStory(),
          PeopleStories(),
        ],
      ),
    );
  }
}

第二个小部件

class PeopleStories extends StatelessWidget {
  final List<String> storiesPic = [
    'https://images.unsplash.com/photo-1536896407451-6e3dd976edd1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1234&q=80',
    'https://images.unsplash.com/photo-1553457055-88e354f1257c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1234&q=80',
    'https://images.unsplash.com/photo-1545064189-2d901f702a28?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1234&q=80',
    'https://images.unsplash.com/photo-1501943416256-08140ba03763?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1436&q=80',
    'https://images.unsplash.com/photo-1572151510493-38eb612d23be?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1268&q=80',
    'https://images.unsplash.com/photo-1548536154-b47a70d27d8e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1234&q=80',
//    'https://images.unsplash.com/photo-1582129617595-c657a072c9b9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3662&q=80',
//    'https://images.unsplash.com/photo-1559870904-406aeea0a89c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80'
  ];

  @override
  Widget build(BuildContext context) {
    return Row(
      children: _buildStoriesList(),
    );
  }

  List<StoryDesign> _buildStoriesList() {
    List<StoryDesign> widgets = [];
    int i = 0;

    storiesPic.forEach((pic) {
      ++i;
      widgets.add(StoryDesign(pic));
    });

    return widgets;
  }
}

小部件的设计，如果有的话，它可以进行多次渲染。

class StoryDesign extends StatelessWidget {
  StoryDesign(this.profilePic);
  final String profilePic;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(
          left: kMediumSeparation / 2,
          top: kCommonSeparation,
          right: kMediumSeparation / 2,
          bottom: kHugeSeparation),
      child: InkWell(
        onTap: () => print('profile bubble tapped'),
        borderRadius: BorderRadius.all(Radius.circular(35.0)),
        child: CircleAvatar(
          backgroundImage: NetworkImage(profilePic),
          radius: 35.0,
          backgroundColor: kDefaultColorLoading,
        ),
      ),
    );
  }
}

Answer 1

我认为最可能的原因可能是图像太大。
还可以使用CachedNetworkImage更快地加载图像。