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

百度已收录   阅读次数: 80
2021-08-0922:23:21 发表评论
摘要

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

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

开篇寄语

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

前情提要

内容详情

以下内容大多是更改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,这样一来就不会报错了。

分享至:
  • 我的微信
  • 微信扫一扫加好友
  • weinxin
  • 我的微信公众号
  • 扫描关注公众号
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: