ListView에서 즐겨 찾기 선택을 만드는 자습서의 코드를 보았습니다. 그러나 공급자를 사용하지 않는 것을 보았습니다. 사용하는 것이 더 나은지 궁금합니다. 각 항목의 버튼을 클릭하여 즐겨 찾기 선택을 만들고 다른 ListView에서 선택 항목을 검색하고 싶습니다. 다음은 튜토리얼의 코드입니다.
main.dart
import 'package:badges/badges.dart';
import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';
import 'package:words/favorite_words_route.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Likely Words',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Likely Words'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List<String> words = nouns.take(40).toList();
List<String> savedWords = List<String>();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
actions: <Widget>[
Badge(
badgeContent: Text('${savedWords.length}'),
toAnimate: false,
position: BadgePosition.topRight(top: 0, right: 0),
child: IconButton(
icon: Icon(Icons.bookmark),
onPressed: () => pushToFavoriteWordsRoute(context),
),
),
],
),
body: ListView.separated(
itemCount: words.length,
separatorBuilder: (BuildContext context, int index) => Divider(),
itemBuilder: (BuildContext context, int index) {
String word = words[index];
bool isSaved = savedWords.contains(word);
return ListTile(
title: Text(word),
trailing: Icon(
isSaved ? Icons.favorite : Icons.favorite_border,
color: isSaved ? Colors.red : null,
),
onTap: () {
setState(() {
if (isSaved) {
savedWords.remove(word);
} else {
savedWords.add(word);
}
});
},
);
},
),
);
}
Future pushToFavoriteWordsRoute(BuildContext context) {
return Navigator.of(context).push(
MaterialPageRoute(
builder: (BuildContext context) => FavoriteWordsRoute(
favoriteItems: savedWords,
),
),
);
}
}
favorite_words_route.dart
import 'package:flutter/material.dart';
class FavoriteWordsRoute extends StatelessWidget {
final List<String> favoriteItems;
const FavoriteWordsRoute({Key key, @required this.favoriteItems}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Favorites words'),
),
body: ListView.separated(
itemCount: favoriteItems.length,
separatorBuilder: (BuildContext context, int index) => Divider(),
itemBuilder: (BuildContext context, int index) => ListTile(
title: Text(favoriteItems[index]),
),
),
);
}
}
공급자가 더 나은 경우 성능에 대해 알려주십시오.
호출 setState
하면 위젯이 다시 빌드됩니다. 위젯이 다시 빌드되면 최악의 경우 모든 하위가 빌드됩니다. 따라서 목록을 작성하면 모든 목록 항목이 다시 작성 될 수 있습니다.
이 경우 수행 할 수있는 최적화 는 위젯 대신 setState
내부에서 호출 하는 ListItem
것입니다 MyHomePage
. 이는 Flutter ListItem
보다 자식이 적기 때문에 할 일 이 가장 적습니다 ListView
.
공급자는 Flutter가 위젯을 빌드하는 방식에 영향을주지 않습니다. Provider를 사용할 때 너무 자주 위젯을 너무 자주 다시 빌드하는 것과 동일한 실수를 할 수 있습니다.
그러나 공급자 는 더 작은 위젯을 다시 빌드 할 수있는 몇 가지 도구를 제공합니다. 한 가지 예는 Selector 입니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다