dart - 从 Function Widget 到 Flutter 中的 StatelessWidget

Question

我正在使用 Google Lab 示例中的 firestore。我想要发生的是将 _buildList() 和 _buildListItem() 函数 Widget 转换为包含参数的 StatelessWidget，因为我在一篇文章中指出拆分为函数 Widget 是性能反模式。但我不知道从哪里开始。任何可以阐明这个问题的人。谢谢。

class _VideoListState extends State<VideoList> {
  @override
  Widget build(BuildContext context) {
    ...
    body: StreamBuilder<QuerySnapshot>(
      stream: Firestore.instance.collection(widget.category).snapshots(),
      builder: (context, snapshot) {
        if (!snapshot.hasData) return LinearProgressIndicator();
        // I want StatelessWidget not function widget
        return _buildList(context, snapshot.data.documents);
      },
    ),
  );
}

Widget _buildList(BuildContext context, List<DocumentSnapshot> snapshot) {
    return ListView(
        // I want StatelessWidget not function widget
        children: snapshot.map((data) => _buildListItem(context, data)).toList(),            
  );
}

Widget _buildListItem(BuildContext context, DocumentSnapshot data) {
  final record = Record.fromSnapshot(data);

  return Column(
    children: <Widget>[
        Text(record.title),
        YoutubePlayer(
             source: record.videoId.toString(),
             quality: YoutubeQuality.LOW,
             autoPlay: false,
             context: context
        );
    } 
}

Answer 1

很简单。查看源代码并阅读注释。来源是自动解释的。我已将您的方法名称用作类名称。

// the method buildList into a stateless widget
class BuildListWidget extends StatelessWidget{
  final List<DocumentSnapshot> snapshotList;

  BuildListWidget({this.snapshotList}){} // you can use this approach to initialize your snapshotList. 
  // Here there parameter is already the member of class snapshotList

  @override
  Widget build(BuildContext context) {
    //building a listView in this way allows you build items on demand.
    return ListView.builder(
        itemCount: snapshotList.length, // number of items in list
        itemBuilder: (BuildContext context, int index){
          //creating list members. Each one with your DocumentSnapshot from list
          return BuildListItemWidget(
            dataSnapshot: snapshotList[index], // getting DocumentSnapshot from list
          );
        }
    );
  }
}


// the mehtod _buildListItem into a stateless widget
class BuildListItemWidget extends StatelessWidget {
  final DocumentSnapshot _data; // just if you want to hold a snapshot...
  final Record _record; // your record reference

//here another approach to inicialize class data using named parameters and
// initialization list in class contructor
  BuildListItemWidget({@required DocumentSnapshot dataSnapshot}) :
      _record = Record.fromSnapshot(dataSnapshot),
      _data = dataSnapshot;

  @override
  Widget build(BuildContext context) {
    return Column(
        children: <Widget>[
          Text(record.title),
          YoutubePlayer(source: _record.videoId.toString(),
            quality: YoutubeQuality.LOW,
            autoPlay: false,
            context: context
          );
    }
}

// usage...
class _VideoListState extends State<VideoList> {
  @override
  Widget build(BuildContext context) {
    ...
    body: StreamBuilder<QuerySnapshot>(
    stream: Firestore.instance.collection(widget.category).snapshots(),
    builder: (context, snapshot) {
    if (!snapshot.hasData) return LinearProgressIndicator();
    // so here you have a statelessWidget
    return  BuildListWidget( snapshotList: snapshot.data.documents );
    },
    ),
  }
}