web-dev-qa-db-fra.com

Placement de deux icônes de fin dans ListTile

Je veux placer deux icônes côte à côte sur le côté "fin" d'un ListTile. J'ai essayé d'ajouter un widget Row avec les deux icônes à l'intérieur, mais cela a complètement gâché la disposition de tout le ListTile, le rendant inutilisable. Existe-t-il un moyen d'agrandir l'espace alloué à la partie arrière?

Voici le code:

import 'package:flutter/material.Dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: ListView(
      children: <Widget>[
        ListTile(
          leading: Icon(Icons.play_arrow,),
          title: Text("This is a title"),
          subtitle: Text("This is subtitle"),
          trailing: Row(          
            children: <Widget>[
            Icon(Icons.flight),
            Icon(Icons.flight_land)
          ]),
        )
      ]
    ),
      ),
    );
  }
}

C'est à ça que ça ressemble:

21
avishorp

Ajouter mainAxisSize: MainAxisSize.min à l'instance Row () résout le problème.

53
avishorp

Vous pouvez simplement utiliser Wrap dans trailing

ListTile(
  title: Text("This is my ListTile"),
  trailing: Wrap(
    spacing: 12, // space between two icons
    children: <Widget>[
      Icon(Icons.call), // icon-1
      Icon(Icons.message), // icon-2
    ],
  ),
)

enter image description here

0
CopsOnRoad