如何使用 Flutter 将文本(垂直和水平)居中在卡片的给定空间中?

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

这是一个颤振代码,我无法找到一种方法使文本在空白处居中。有谁知道如何将代码文本放在空白处居中?我尝试用容器包裹文本并将文本对齐设置为居中,但没有任何效果。

Card(
        margin: EdgeInsets.only(left: 24),
      elevation: 12,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(12),
      ),
      child: Container(
        height: MediaQuery.of(context).size.height/4,
        width: MediaQuery.of(context).size.width-48,
        child:  Stack(
          children:[
          Column(
            mainAxisAlignment: MainAxisAlignment.start,
              children: const [
                 Text(
                        'My',
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 28,
                          color: Colors.black,
                        ),
                      ),
                        Text(
                        'Text',
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 28,
                          color: Colors.black,
                        ),
                      ),
              ],
          ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                    Ink(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.only(
                          topRight: Radius.circular(12), 
                          bottomRight: Radius.circular(12),
                        ),
                        color: Colors.blueAccent,
                      ),
                      width: 120,
                      height: MediaQuery.of(context).size.height/4,
                      child: Align(
                        alignment: Alignment.center,
                        child: Icon(
                          Icons.myicon,
                          size: 60,
                        ),
                      ),
                    ),
                  ],
                ),
            InkWell(
              onTap: () => {},
            ),
          ],
        ),
      ),
      ),

enter image description here

flutter flutter-layout
2个回答
0
投票

试试这个

Card(
  margin: EdgeInsets.only(left: 24),
  elevation: 12,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(12),
  ),
  child: Container(
    height: MediaQuery.of(context).size.height/4,
    width: MediaQuery.of(context).size.width-48,
    child:  Stack(
      children:[
        Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: const [
            Center(
              child: Text(
                'My',
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 28,
                  color: Colors.black,
                ),
              ),
            ),
            Center(
              child: Text(
                'Text',
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 28,
                  color: Colors.black,
                ),
              ),
            ),
          ],
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            Ink(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.only(
                  topRight: Radius.circular(12),
                  bottomRight: Radius.circular(12),
                ),
                color: Colors.blueAccent,
              ),
              width: 120,
              height: MediaQuery.of(context).size.height/4,
              child: Align(
                alignment: Alignment.center,
                child: Icon(
                  Icons.myicon,
                  size: 60,
                ),
              ),
            ),
          ],
        ),
        InkWell(
          onTap: () => {},
        ),
      ],
    ),
  ),
),

0
投票

您是否尝试过将文本小部件按“居中”换行?

  Center(
       child:Text(
                    'My',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 28,
                      color: Colors.black,
                    ),
                  ),
© www.soinside.com 2019 - 2024. All rights reserved.