Placing two trailing icons in ListTile

问题

I want to place two icons, side by side on the "trailing" side of a ListTile. I tried adding a Row widget with the two icons inside, but it completely messed up the layout of the entire ListTile, making it unusable. Is there any way to expand the space allocated for the trailing part?

Here's the 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)
          ]),
        )
      ]
    ),
      ),
    );
  }
}

This is how it looks like:

回答1:

Adding mainAxisSize: MainAxisSize.min to the Row() instance fixes the issue.

回答2:

You can simply use Wrap in 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
    ],
  ),
)

回答3:

Try this code. I think This is working Corectly.

trailing: FittedBox(
          fit: BoxFit.fill,
          child: Row(
          children: <Widget>[
            Icon(Icons.flight),
            Icon(Icons.flight_land),
          ],
          ),
        ),

来源：https://stackoverflow.com/questions/54548853/placing-two-trailing-icons-in-listtile

标签

Flutter

flutter-layout