Question

这是我的代码，在这里我只想知道如何在图像下方添加文本。请让我知道吗？

child: Column(
      children: <Widget>[
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        Expanded(
          child: Image.asset('assets/cat.jpg',
          ),
        ),
        Expanded(
          child: Image.asset('assets/cat.jpg'),
        ),
        Expanded(
          child: Image.asset('assets/cat.jpg'),
        ),
      ],
    ),

Answer 1

child: Column(children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Expanded(
                child: Column(
                  children: <Widget>[
                    Image.asset(
                      'assets/cat.jpg',
                    ),
                    Text('cat')
                  ],
                ),
              ),
              Expanded(
                child: Column(
                  children: <Widget>[
                    Image.asset('assets/cat.jpg'),
                    Text('cat')
                  ],

                ),
              ),
              Expanded(
                child: Column(
                  children: <Widget>[
                    Image.asset('assets/cat.jpg'),
                    Text('cat')
                  ],
                ),
              ),
            ],
          )
        ]);
      },
    )

Answer 2

您只需要将图像包装在Column / Stack中

child: Column(
        children: <Widget>[
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Expanded(
              child: Column(children: <Widget>[
                Image.asset('assets/cat.jpg'),
                Text('Some text')
              ],)
            ),
            Expanded(
              child: Column(children: <Widget>[
                Image.asset('assets/cat.jpg'),
                Text('Some text')
              ],)
            ),
            Expanded(
              child: Column(children: <Widget>[
                Image.asset('assets/cat.jpg'),
                Text('Some text')
              ],)
            ),
          ],
        ),

Answer 3

如果您想一次在图像下方添加一行文本

Column(
      children: <Widget>[
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        Expanded(
          child: Image.asset('assets/cat.jpg',
          ),
        ),
        Expanded(
          child: Image.asset('assets/cat.jpg'),
        ),
        Expanded(
          child: Image.asset('assets/cat.jpg'),
        ),
      ],
    ),
   Text("Your text here"),
]), // column widget ends here

如果要在每个图像下方添加文本，则以此更改您的扩展窗口小部件。

Expanded(
   child: Column(
       children : <Widget>[
         Image.asset('assets/cat.jpg'),
         Text("your text here")
       ] 
   )
),

否则创建一个函数以返回小部件，因为您似乎有很多这种小部件

Widget getWidget(imagePath, text){
   return Expanded(
      child: Column(
          children : <Widget>[
            Image.asset(imagePath),
            Text(text)
          ] 
       )
     )
}

然后使用它

Column(
  children: <Widget>[
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        getWidget('assets/cat.jpg','your text here'),
        getWidget('assets/cat.jpg','your text here'),
        getWidget('assets/cat.jpg','your text here'),
      ],
    ),
]),

Answer 4

Card(
        elevation: 5,
        child: Column(
          children: <Widget>[
            Expanded(
              child: Image.asset('assets/img.jpg'),
            ),
            Text('My Image'),
          ],
        ),
      ),

您可以将此代码行或根据需要放置。您还可以放置一些填充以排列文本图像。如果要保持恒定的高度和重量，请将其放入“容器小部件”中并指定高度和重量。谢谢。

如何在抖动中连续在图像下方添加标签，以及如何在抖动中添加卡

4 个答案: