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

enter image description here

我以前的实现（我忘记了它的外观）使它看起来像是一排向上按钮，一个投票计数和一个向下按钮。我该怎么做？

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的高度，它取决于字幕和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),
      ),
    );

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

我的建议：您应该像上面文档的CustomListTile类一样创建自定义类

ListTile前导小部件的底部溢出（颤振）

2 个答案: