Question

由于某些原因，卡片中的文本显示的位置略低于每张卡片的垂直中心。随着添加更多卡，它变得更加引人注目。

我尝试将“文本”小部件包装在“中心”小部件中。我尝试将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,
                                ),
                              )),
                            ),
                          ))),
                ],
              ),
            ),
          ],
        ),
      ),
    ],
  ),
);

Answer 1

Container(
                    child: Card(
                      margin: EdgeInsets.all(20.0),
                      elevation: 10.0,
                      //color: Colors.blue,

                        child:Align(
                          child: ListTile(
                          title: Text(
                            "CIL",
                            style: TextStyle(fontWeight: FontWeight.bold),
                            textAlign: TextAlign.center,

                          ),
                        ),
                          alignment: Alignment.center,
                      ),
                    ),
                  ),

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

1 个答案: