在ListTile中放置两个尾随图标

问题描述 投票:17回答:2

我想将两个图标并排放置在ListTile的“尾随”侧。我尝试添加带有两个图标的Row小部件,但是它完全弄乱了整个ListTile的布局,使其无法使用。有什么方法可以扩展为尾部分配的空间吗?

这是代码:

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)
          ]),
        )
      ]
    ),
      ),
    );
  }
}

外观如下:

flutter flutter-layout
2个回答
50
投票

mainAxisSize: MainAxisSize.min添加到Row()实例可解决此问题。


0
投票

您可以简单地在Wrap中使用trailing

ListTile(
  trailing: Wrap(
    spacing: 12, // space between two icons
    children: <Widget>[
      Icon(Icons.call), // icon-1
      Icon(Icons.message), // icon-2
    ],
  ),
)
© www.soinside.com 2019 - 2024. All rights reserved.