如何创建联系人列表

时间:2018-08-15 03:01:53

标签: flutter flutter-layout

我是新手,只是跟随一些基本教程,但是我一直在遵循:https://hackernoon.com/flutter-iii-lists-and-items-6bfa7348ab1b,而且似乎无法运行代码。原谅格式,仍然习惯于论坛。

      import 'package:flutter/material.dart';
      import 'contact_data.dart';

      class ContactsPage extends StatelessWidget {

      @override
      Widget build(BuildContext context) {
       return new Scaffold(
        appBar: new AppBar(
         title: new Text("Contacts"),
      ),
      body: new ContactList(kContacts)
    );
  }

}


     class ContactList extends StatelessWidget {

   final List<Contact> _contacts;

   ContactList(this._contacts);

   @override
   Widget build(BuildContext context) {
   return new ListItem(
       type: MaterialListType.twoLine,
       padding: new EdgeInsets.symmetric(vertical: 8.0),
       children: _buildContactList()
    );
 }

 List<_ContactListItem> _buildContactList() {
   return _contacts.map((contact) => new _ContactListItem(contact))
     .toList();
  }

}

class _ContactListItem extends ListItem {

  _ContactListItem(Contact contact) :
       super(
         title : new Text(contact.fullName),
         subtitle: new Text(contact.email),
          leading: new CircleAvatar(
          child: new Text(contact.fullName[0])
        )
     );

}

这是我要从中将信息导入到ContactsPage的contacts_data页面:

class Contact {
  final String fullName;
   final String email;

   const Contact({this.fullName, this.email});
}


const kContacts = const <Contact>[
  const Contact(
  fullName: 'Romain Hoogmoed',
  email:'romain.hoogmoed@example.com'
  ),
   const Contact(
      fullName: 'Emilie Olsen',
      email:'emilie.olsen@example.com'
  ),
  const Contact(
       fullName: 'Téo Lefevre',
      email:'téo.lefevre@example.com'
   ),
  const Contact(
      fullName: 'Nicole Cruz',
      email:'nicole.cruz@example.com'
  ),
  const Contact(
      fullName: 'Ramna Peixoto',
      email:'ramna.peixoto@example.com'
  ),
  const Contact(
      fullName: 'Jose Ortiz',
      email:'jose.ortiz@example.com'
  ),
  const Contact(
     fullName: 'Alma Christensen',
     email:'alma.christensen@example.com'
  ),
  const Contact(
     fullName: 'Sergio Hill',
     email:'sergio.hill@example.com'
  ),
  const Contact(
     fullName: 'Malo Gonzalez',
     email:'malo.gonzalez@example.com'
 ),
 const Contact(
     fullName: 'Miguel Owens',
     email:'miguel.owens@example.com'
 ),
  const Contact(
     fullName: 'Lilou Dumont',
     email:'lilou.dumont@example.com'
 ),
  const Contact(
     fullName: 'Ashley Stewart',
     email:'ashley.stewart@example.com'
  ),
  const Contact(
       fullName: 'Roman Zhang',
      email:'roman.zhang@example.com'
 ),
  const Contact(
     fullName: 'Ryan Roberts',
     email:'ryan.roberts@example.com'
 ),
 const Contact(
     fullName: 'Sadie Thomas',
     email:'sadie.thomas@example.com'
 ),
 const Contact(
     fullName: 'Belen Serrano',
     email:'belen.serrano@example.com '
  )

];

1 个答案:

答案 0 :(得分:2)

我修复了代码,有些小部件不可用。

    class ContactsPage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return new Scaffold(
            appBar: new AppBar(
              title: new Text("Contacts"),
            ),
            body: new ContactList(kContacts));
      }
    }

    const kContacts = const <Contact>[
      const Contact(
          fullName: 'Romain Hoogmoed', email: 'romain.hoogmoed@example.com'),
      const Contact(fullName: 'Emilie Olsen', email: 'emilie.olsen@example.com')
    ];

    class ContactList extends StatelessWidget {
      final List<Contact> _contacts;

      ContactList(this._contacts);

      @override
      Widget build(BuildContext context) {
        return new ListView.builder(
          padding: new EdgeInsets.symmetric(vertical: 8.0),
          itemBuilder: (context, index) {
            return new _ContactListItem(_contacts[index]);
          },
          itemCount: _contacts.length,
        );
      }
    }

    class _ContactListItem extends ListTile {
      _ContactListItem(Contact contact)
          : super(
                title: new Text(contact.fullName),
                subtitle: new Text(contact.email),
                leading: new CircleAvatar(child: new Text(contact.fullName[0])));
    }

    class Contact {
      final String fullName;
      final String email;

      const Contact({this.fullName, this.email});
    }

让我知道它是否对您有用。