ListTile 前导小部件的底部溢出 (Flutter)

Question

我正在尝试为每个问题添加一个功能，表示为 ListTile，以便它可以对问题进行投票或否决，并显示净投票，就像在堆栈溢出时使用的一样。 我当前的实现对每个 ListTile 进行底部溢出。

          Card(
            child: new Column(
              children: <Widget>[
                new ListTile(
                  leading: Column(
                    children: <Widget>[
                      FlatButton(
                        child: Icon(Icons.arrow_drop_up),
                        onPressed: () {},
                      ),
                      StreamBuilder<DocumentSnapshot>(
                        stream: RoomDbService(widget.roomName, widget.roomID)
                            .getQuestionVotes(widget.questionID),
                        builder: (context, snapshot) {
                          if (!snapshot.hasData) {
                            return Center(child: CircularProgressIndicator());
                          } else {
                            print(snapshot.data.data["votes"]);
                            return Text("${snapshot.data.data["votes"]}");
                          }
                        },
                      ),
                      FlatButton(
                        child: Icon(Icons.arrow_drop_down),
                        onPressed: () {},
                      ),
                    ],
                  ), // shows votes of this qn on the left of the tile
                  title: Text(text),
                  trailing: FlatButton(
                    child: Icon(Icons.expand_more),
                    onPressed: toggleExpansion,
                  ),
                  
                )
              ],
            ),
          );

我之前的实现（我忘记了它的样子）使它看起来像一排向上按钮、投票计数和向下按钮。 我该如何正确地做到这一点？

Answer 1

看看这个例子以你为例我在代码中做了一些修改

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: HomePage());
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
 

    return Scaffold(
      body: SingleChildScrollView(
          child: Card(
        child: new Column(
          children: <Widget>[
            SizedBox(
              height: 10,
            ),
            Container(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Column(
                    children: <Widget>[
                      InkWell(onTap: () {}, child: Icon(Icons.arrow_drop_up)),
                      Text(
                        "your Text,
                        style: TextStyle(fontSize: 10),
                      ),
                      InkWell(onTap: () {}, child: Icon(Icons.arrow_drop_down)),
                    ],
                  ),
                  Text('You stream text'),
                  FlatButton(
                    child: Icon(Icons.expand_more),
                    onPressed: () {},
                  ),
                ],
              ),
            )
          ],
        ),
      )),
    );
  }
}

让我知道它是否有效。

Answer 2

您可以使用 Row... 为您想要的布局制作自定义小部件。

但是如果你还想使用 ListTile，那么你必须在你的代码中做一些改变，ListTile 的高度我们不能随意设置，它取决于 subtitle 和 isThreeLine 属性。

因此，如果添加字幕，您可以获得更高的高度，并且使用 isThreeLine: true 可以让您的字幕更高的高度以适合 ListTile....

对于您的情况，您需要更改前导小部件....使用 InkWell 而不是 FlatButton....

• 在 CircularProgressIndicator 中进行一些更改。
• 使用小图标表示赞成/反对并使用小文本进行计数，否则它将再次溢出。

请参阅下面的代码或在 DartPad ListTile_StackOverFlow中使用它。

    Card(
      child: ListTile(
        leading: Column(
            children:[
              InkWell(
                child:  Icon(Icons.arrow_drop_up),
                onTap: () {}
              ),
              Container(
                height: 8,
                width:8,
                child: Center(child: CircularProgressIndicator(strokeWidth :2))
              ),
              InkWell(
                child: Icon(Icons.arrow_drop_down),
                onTap: () {}
              ),
            ]
          ),
        title: Text('Titled text'),
        trailing: Icon(Icons.more_vert),
      ),
    );

更好的解决方案是使用 Row 和 column 并制作您自己的自定义 Widget，看起来像 ListTile.... 请参阅官方文档，在这里您可以看到一个示例，它具有 CustomListTile class 创建自定义外观 ListTile（不直接使用 ListTile ）。 ...

我的建议：您应该像上面文档的 CustomListTile class 一样制作自定义 class