Flutter如何让ListTile在尾部跟随不止一个图标按钮，使用这个方法轻松实现

开篇寄语

Flutter中有一个ListTile组件，可以生成一个个条目，头尾都可以设置图标，常见的都是放置一个，但是在某些特殊需求的情况戏需要放置不止一个图标的话该如何放置呢？对于有学习过Flutter制作App的朋友肯定第一印象是在trailing放置Row组件，然后放置诸多IconButton，不过嘛，在调试的时候这种布置会报错，那么该用什么方法呢？请看下面的例子，一看即知。

前情提要

• 《Flutter如何设置移动端禁止随手机自动旋转屏幕》
• 《Flutter制作自己的第一个全平台APP学习之实用功能篇》
• 《Flutter有关ColorFiltered一些有趣实例，图片变色大不同》

内容详情

以下内容大多是更改lib下的main.dart文件内容，删掉里面的内容，复制粘贴代码，开启调试就可以出现了。

// main.dart
// ignore_for_file: prefer_const_constructors

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        // Remove the debug banner
        debugShowCheckedModeBanner: false,
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.deepPurple,
        ),
        home: HomePage());
  }
}

class HomePage extends StatelessWidget {
  // Generate some dummy data
  final List<Map<String, dynamic>> _items = List.generate(
      15,
      (index) =>
          {"id": index, "title": "Item $index", "subtitle": "Subtitle $index"});

  HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo'),
        ),
        body: ListView(
            children: ListTile.divideTiles(
                color: Colors.deepPurple,
                tiles: _items.map((item) => ListTile(
                      leading: CircleAvatar(
                        backgroundColor: Colors.amber,
                        child: Text(item['id'].toString()),
                      ),
                      title: Text(item['title']),
                      subtitle: Text(item['subtitle']),
                      trailing: Row(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          IconButton(
                              onPressed: () {}, icon: Icon(Icons.favorite)),
                          IconButton(onPressed: () {}, icon: Icon(Icons.edit)),
                          IconButton(
                              onPressed: () {}, icon: Icon(Icons.delete)),
                        ],
                      ),
                    ))).toList()));
  }
}

生成效果就如封面图所示了。

简单来说就是在Row的布局中添加一条属性：mainAxisSize: MainAxisSize.min，这样一来就不会报错了。