垂直对齐Flutter中Card小部件中的文本

问题描述 投票:0回答:1

由于某种原因,卡中的文本显示略低于每张卡的垂直中心。随着更多卡的添加,它变得更加明显。

enter image description here enter image description here

我已经尝试将Text小部件包装在Center小部件中。我尝试将mainAxisAlignment和crossAxisAlignment放在我觉得合适的位置,但仍然没有区别。

值得注意的是:我使用的是AutoSizeText小部件,其中包含普通的Text小部件。但即使使用普通的Text小部件,我也会遇到同样的问题。

return new Container(
  padding: new EdgeInsets.all(20.0),
  child: Column(
    children: <Widget>[
      Expanded(
        flex: 2,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            new Text(
              'Happy with this text',
              style: new TextStyle(fontSize: 20.0),
            ),
            new Text(
              'Happy with this text',
              style: new TextStyle(fontSize: 20.0),
            ),
          ],
        ),
      ),
      Expanded(
        flex: 8,
        child: Row(
          // mainAxisAlignment: MainAxisAlignment.center, // does not make any noticeable difference
          // crossAxisAlignment: CrossAxisAlignment.center, // does not make any noticeable difference
          children: <Widget>[
            Expanded(
                child: Card(
              color: Colors.white70,
              child: Container(
                child: ListTile(
                  title: Center(
                    child: AutoSizeText(
                      'Not happy with this text',
                      style: TextStyle(
                          fontWeight: FontWeight.w500, fontSize: 30),
                      minFontSize: 12.0,
                    ),
                  ),
                  leading: Icon(
                    Icons.question_answer,
                    color: Colors.blue[500],
                  ),
                ),
              ),
            )),
            Expanded(
              child: Column(
                children: <Widget>[
                  Expanded(
                      child: InkWell(
                          onTap: () {
                            print("Card 1 Clicked");
                          },
                          child: Card(
                            color: Colors.white70,
                            child: Container(
                              child: ListTile(
                                  title: Center(
                                child: AutoSizeText(
                                  'Not happy with this text',
                                  style: TextStyle(
                                      fontWeight: FontWeight.w400,
                                      fontSize: 12),
                                  minFontSize: 12.0,
                                ),
                              )),
                            ),
                          ))),
                  Expanded(
                      child: InkWell(
                          onTap: () {
                            print("Card 2 Clicked");
                          },
                          child: Card(
                            color: Colors.white70,
                            child: Container(
                              child: ListTile(
                                  title: Center(
                                child: AutoSizeText(
                                  'Not happy with this text',
                                  style: TextStyle(
                                      fontWeight: FontWeight.w400,
                                      fontSize: fontSize),
                                  minFontSize: 12.0,
                                ),
                              )),
                            ),
                          ))),
                  Expanded(
                      child: InkWell(
                          onTap: () {
                            print("Card 3 Clicked");
                          },
                          child: Card(
                            color: Colors.white70,
                            child: Container(
                              child: ListTile(
                                  title: Center(
                                child: AutoSizeText(
                                  'A nocturnal ',
                                  style: TextStyle(
                                      fontWeight: FontWeight.w400,
                                      fontSize: fontSize),
                                  minFontSize: 12.0,
                                ),
                              )),
                            ),
                          ))),
                  Expanded(
                      child: InkWell(
                          onTap: () {
                            print("Card 4 Clicked");
                          },
                          child: Card(
                            color: Colors.white70,
                            child: Container(
                              child: ListTile(
                                  title: Center(
                                child: AutoSizeText(
                                  'A nocturnal ',
                                  style: TextStyle(
                                      fontWeight: FontWeight.w400,
                                      fontSize: fontSize),
                                  minFontSize: 12.0,
                                ),
                              )),
                            ),
                          ))),
                ],
              ),
            ),
          ],
        ),
      ),
    ],
  ),
);
flutter flutter-layout
1个回答
0
投票

删除ListTile修复了这个问题,虽然我认为更好的方法是覆盖ListTile导致这种情况的任何默认值。

© www.soinside.com 2019 - 2024. All rights reserved.