简体   繁体   English

如何在图像下添加文本,如下面的示例所示 [Flutter]

[英]How to add text under images like shown in example below [Flutter]

I would like to add the text "Appointments" like shown in the example below.我想添加文本“约会”,如下例所示。 I've tried using the Text widget under Image.asset but I don't think I'm using it right.我尝试使用 Image.asset 下的 Text 小部件,但我认为我没有正确使用它。 I'm still new to Flutter so any help would be much appreciated.我还是 Flutter 的新手,所以任何帮助都将不胜感激。

Expected Output预期产出

This is the code I have so far:这是我到目前为止的代码:

            Container(
              height: 250,
              width: 320,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10),
                boxShadow: kElevationToShadow[1],
                color: Color.fromARGB(255, 255, 255, 255),
              ),
              child: Align(
                alignment: Alignment(0, -0.5),
                child: Image.asset("assets/appointment.png", height: 150, width: 150),
              ), 
            ),

Use below code :使用以下代码:

 Container(
              height: 250,
              width: 320,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10),
                boxShadow: kElevationToShadow[1],
                color: Color.fromARGB(255, 255, 255, 255),
              ),
              child: Column(
                children: [
                  Align(
                    alignment: Alignment(0, -0.5),
                    child: Image.asset("assets/appointment.png", height: 150, width: 150),
                  ),
                  SizedBox(height: 20,),
                  Text('Appointments',style: TextStyle(color: Colors.black,fontSize: 18),),
                ],
              ),
            ),

Used card and column widget for this type of UI.用于此类 UI 的卡片和列小部件。

Card(
  elevation: 10,
  shape: RoundedRectangleBorder(borderRadius:BorderRadius.circular(10)),
  child: Column(
    children: [
      // Your Image Widget
      // Your Text Widget
    ],
  ),
),

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM