[您好,我试图做类似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,
),
),
);
}
}
我认为这是因为图像很大,这一https://images.unsplash.com/photo-1582129617595-c657a072c9b9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3662&q=80