代码之家  ›  专栏  ›  技术社区  ›  Dan

在颤振中垂直对齐卡片小部件中的文本

  •  0
  • Dan  · 技术社区  · 7 年前

    由于某些原因,卡片中的文字显示略低于每张卡片的垂直中心。当更多的卡片被添加时,它变得更加明显。

    enter image description here enter image description here

    我已经尝试将文本小部件包装到中心小部件中。我曾尝试将mainAxisAlignment和crossAxisAlignment放置在我认为合适的位置,但仍然没有区别。

    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,
                                    ),
                                  )),
                                ),
                              ))),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
    
    1 回复  |  直到 7 年前
        1
  •  0
  •   Dan    7 年前

    删除ListTile修复了这个问题,尽管我认为更好的方法是覆盖ListTile的任何默认值,这会导致此问题。

        2
  •  0
  •   Kariba    5 年前
    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,
                          ),
                        ),
                      ),