Question

我想要一个圆圈，我可以使用 ListTile 小部件在其中放置居中的文本？我所做的如下：

          ListTile(
        leading: new CircleAvatar(
            backgroundColor: color2,
            child: new Text(
              letter,
              style: TextStyle(
                color: color,
                fontSize: 17.0,
                fontWeight: FontWeight.bold,
              ),
            )),
        title: Text(
          text,
          style: TextStyle(fontSize: 15),
        ),
        subtitle: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            SizedBox(height: 2.0),
            Text(
              subtext,
              style: TextStyle(
                fontSize: 12.0,
              ),
            ),
            SizedBox(height: 2.0),
            Text(
              date,
              style: TextStyle(
                fontSize: 12.0,
              ),
            ),
            SizedBox(height: 2.0),
          ],
        ),
        trailing: Container(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.end,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              new Text(
                amount,
                style:
                    TextStyle(fontSize: 13.0, fontWeight: FontWeight.bold),
              ),
              SizedBox(height: 5.0),
            ],
          ),
        ),
      ),

结果：

如您所见，该字符串未垂直居中，我希望这样做可以保留相同的设计。准确的说，圆圈里面的箭头不是图标，而是字符串类型的变量。

Answer 1

你可以使用圆形的容器，在里面，请像下面的代码一样将文本居中：

                Container(
                width: 60,
                height: 60,
                child: Center(child: Text("Your text"),
                decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Color(0xFFe0f2f1)),
              )

Answer 2

我已经编辑了你的代码，所以请试试这个并告诉我。

ListTile(
    leading: Container(
      height: 50,
      width: 50,
      decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.blue),
      child: Center(
        child: Text(
          'Text',
          style: TextStyle(fontSize: 17),
        ),
      ),
    ),
    title: Text(
      text,
      style: TextStyle(fontSize: 15),
    ),
    subtitle: Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        SizedBox(height: 2.0),
        Text(
          subtext,
          style: TextStyle(
            fontSize: 12.0,
          ),
        ),
        SizedBox(height: 2.0),
        Text(
          date,
          style: TextStyle(
            fontSize: 12.0,
          ),
        ),
        SizedBox(height: 2.0),
      ],
    ),
    trailing: Container(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.end,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          new Text(
            amount,
            style: TextStyle(fontSize: 13.0, fontWeight: FontWeight.bold),
          ),
          SizedBox(height: 5.0),
        ],
      ),
    ),
  );

希望成功

如何在颤振中使用listTile将字符串放入圆圈内？

2 个答案: