Question

如何在 Flutter 中实现细节布局？

我的构建代码如下所示：


void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  List<Map<String, dynamic>> apiresult = [
    {'N#': '1', 'user_id': 'ida1b2c34', 'added_at': 'today'},
    {'N#': '2', 'user_id': 'ida5b6c78', 'added_at': 'yesterday'},
    {'N#': '3', 'user_id': 'ida5b6c78', 'added_at': 'last year'},
    {'N#': '4', 'user_id': 'ida5b6c78', 'added_at': 'last sentury'},
    {'N#': '5', 'user_id': 'ida5b6c78', 'added_at': 'yesterday'},
    {'N#': '6', 'user_id': 'ida5b6c78', 'added_at': 'yesterday'},
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Material App Bar'),
        ),
        body: ListView(
          padding: const EdgeInsets.all(16.0),
          children: [
            Text(""),
            ...apiresult.map<SlidableTile>((item) => SlidableTile(
                  number: item['N#'],
                  title: item['user_id'],
                  subtitle: item['added_at'],
                )),
          ],
        ),
      ),
    );
  }
}

class SlidableTile extends StatelessWidget {
  final String number;
  final String title;
  final String subtitle;
  const SlidableTile({
    Key key,
    this.title,
    this.subtitle,
    this.number,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Slidable(
      actionPane: SlidableDrawerActionPane(),
      // delegate: SlidableDrawerDelegate(), seems like this is deprecated
      actionExtentRatio: 0.25,
      child: Container(
        color: Colors.white,
        child: ListTile(
          leading: CircleAvatar(
            backgroundColor: Colors.indigoAccent,
            child: Text(number),
            foregroundColor: Colors.white,
          ),
          title: Text('Tile $title'),
          subtitle: Text('SlidableDrawerDelegate $subtitle'),
        ),
      ),
      actions: <Widget>[
        IconSlideAction(
          caption: 'Archive',
          color: Colors.blue,
          icon: Icons.archive,
          onTap: () => print('Archive'),
        ),
        IconSlideAction(
          caption: 'Share',
          color: Colors.indigo,
          icon: Icons.share,
          onTap: () => print('Share'),
        ),
      ],
      secondaryActions: <Widget>[
        IconSlideAction(
          caption: 'More',
          color: Colors.black45,
          icon: Icons.more_horiz,
          onTap: () => print('More'),
        ),
        IconSlideAction(
          caption: 'Delete',
          color: Colors.red,
          icon: Icons.delete,
          onTap: () => print('Delete'),
        ),
      ],
    );
  }
}

现在我想添加一个详细信息页面，我基本上知道如何做到这一点。问题是我不知道如何将它添加到我的 IconSlideAction。更准确地说，我不知道如何在iconslideaction 中获取该项目。

class ItemDetails extends StatelessWidget {
  ItemDetails({@required this.item});
  final Item item;

  @override
  Widget build(BuildContext context) {
    final textTheme = Theme.of(context).textTheme;
    final content = Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(
          item.title,
          style: textTheme.headline,
        ),
        Text(
          item.subtitle,
          style: textTheme.subhead,
        ),
      ],
    );

    return Scaffold(
      appBar: AppBar(
        title: Text(item.title),
      ),
      body: Center(child: content),
    );
  }
}

我希望你能帮助我，现在坚持了大约 1.5 天。谢谢！！！

Answer 1

在 ListTile 中添加

onTap: () => Navigator.push(ItemDetails(item: yourItem))

如何在 Flutter 中实现细节布局

1 个答案: