flutter 如何在图像按钮下方放置文本？

hpxqektj 于 2022-12-05 发布在 Flutter

关注(0)|答案(4)|浏览(342)

我是一个新的Flutter，我想添加一个按钮下的文字，但我不能似乎这样做，到目前为止，这里是我的结果
..

我用两行来表示按钮和文本，正如你们所看到的，文本没有很好地对齐，我试着使用ElevatedButton，但是文本在按钮旁边而不是下面。这是我目前的代码：

import 'package:flutter/material.dart';
import 'package:get/get_navigation/get_navigation.dart';
import 'package:medreminder/NewsArticle/news_home.dart';
import 'Reminder/ui/home_reminder.dart';
import 'Reminder/ui/widgets/button.dart';
import 'package:medreminder/main_reminder.dart';
import 'package:medreminder/home_page.dart';

void main() {
  // debugPaintSizeEnabled = true;
  runApp(const HomePage());
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Medicine Reminder App'),
        ),
        body: Column(
          children: [
            Stack(
              children: [
                Image.asset(
                  'images/MenuImg.jpg',
                  width: 600,
                  height: 170,
                  fit: BoxFit.cover,
                ),
              ],
            ),
            const SizedBox(height: 10.0),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                IconButton(
                  icon: Image.asset('images/reminder.png'),
                    iconSize: 50,
                    onPressed: () {
                      Navigator.of(context, rootNavigator: true).push(
                      MaterialPageRoute(builder: (context) => const ReminderHomePage()),
                    );
                    },
                  ),
               IconButton(
                  icon: Image.asset('images/news.png'),
                    iconSize: 50,
                    onPressed: () {},
                  ),
                IconButton(
                  icon: Image.asset('images/recipe.png'),
                    iconSize: 50,
                    onPressed: () {},
                  ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
               children: [
                Text("Reminder"),
                Text("News"),
                Text("Recipe")
               ],
            )
          ],
        ),
      ),
    );
  }
}

如果有人知道怎么做，请帮忙。2这对我意义重大。3谢谢

flutter

来源：https://stackoverflow.com/questions/74650062/how-do-i-put-a-text-below-an-image-button

4条答案

按热度按时间

zwghvu4y1#

尝试将每个iconButton放入Column及其Text小部件中，尝试以下代码：

import 'package:flutter/material.dart';
import 'package:get/get_navigation/get_navigation.dart';
import 'package:medreminder/NewsArticle/news_home.dart';
import 'Reminder/ui/home_reminder.dart';
import 'Reminder/ui/widgets/button.dart';
import 'package:medreminder/main_reminder.dart';
import 'package:medreminder/home_page.dart';
void main() {
  // debugPaintSizeEnabled = true;
  runApp(const HomePage());
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Medicine Reminder App'),
        ),
        body: Column(
          children: [
            Stack(
              children: [
                Image.asset(
                  'images/MenuImg.jpg',
                  width: 600,
                  height: 170,
                  fit: BoxFit.cover,
                ),
              ],
            ),
            const SizedBox(height: 10.0),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Column(
                  children: [
                    IconButton(
                      icon: Image.asset('images/reminder.png'),
                      iconSize: 50,
                      onPressed: () {
                        Navigator.of(context, rootNavigator: true).push(
                          MaterialPageRoute(builder: (context) => const ReminderHomePage()),
                        );
                      },
                    ),
                    Text("Reminder")
                  ],
                ),
                Column(
                  children: [
                    IconButton(
                      icon: Image.asset('images/news.png'),
                      iconSize: 50,
                      onPressed: () {},
                    ),
                    Text("News")
                  ],
                ),
                Column(
                  children: [
                    IconButton(
                      icon: Image.asset('images/recipe.png'),
                      iconSize: 50,
                      onPressed: () {},
                    ),
                    Text("Recipe")
                  ],
                ),
              ],
            ),
            // Row(
            //   mainAxisAlignment: MainAxisAlignment.,
            //   children: [, , ],
            // )
          ],
        ),
      ),
    );
  }
}

赞(0）回复(0）举报 2022-12-05

2skhul332#

可以使用Row和Column调整Layout

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Column(
          children: [
            const SizedBox(height: 10.0),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                _showButton('assets/images/image1.jpg', 'Reminder'),
                _showButton('assets/images/image2.jpg', 'News'),
                _showButton('assets/images/image2.jpg', 'Recipe'),
              ],
            ),
          ],
        ),
      ),
    );
  }

  _showButton(String imagePath, String text) {
    return Column(
      children: [

        IconButton(
          icon: Image.asset(imagePath),
          iconSize: 50,
          onPressed: () {
            // Navigator.of(context, rootNavigator: true).push(
            //   MaterialPageRoute(builder: (context) => const ReminderHomePage()),
            // );
          },
        ),

        Text(
          text,
          textAlign: TextAlign.center,
        )
      ],
    );
  }

赞(0）回复(0）举报 2022-12-05

vsmadaxz3#

如果你想改变文本按钮的颜色，你可以，它只是为你注解掉

import 'package:flutter/material.dart';

void main() {
  // debugPaintSizeEnabled = true;
  runApp(const HomePage());
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Medicine Reminder App'),
        ),
        body: Column(
          children: [
            Stack(
              children: [
                Image.asset(
                  'images/MenuImg.jpg',
                  width: 600,
                  height: 170,
                  fit: BoxFit.cover,
                ),
              ],
            ),
            const SizedBox(height: 10.0),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Column(
                  children: [
                    IconButton(
                      icon: Image.asset('images/reminder.png'),
                      iconSize: 50,
                      onPressed: () {
                        // Navigator.of(context, rootNavigator: true).push(
                        //   MaterialPageRoute(
                        //       builder: (context) => const ReminderHomePage()),
                        // );
                      },
                    ),
                    TextButton(
                        onPressed: () => print('reminder'),
                        child: Text(
                          'Reminder',
                          //style: TextStyle(color: Colors.black),
                        ))
                  ],
                ),
                Column(
                  children: [
                    IconButton(
                      icon: Image.asset('images/news.png'),
                      iconSize: 50,
                      onPressed: () {},
                    ),
                    TextButton(
                        onPressed: () => print('News'),
                        child: Text(
                          'News',
                          // style: TextStyle(color: Colors.black),
                        ))
                  ],
                ),
                Column(
                  children: [
                    IconButton(
                      icon: Image.asset('images/recipe.png'),
                      iconSize: 50,
                      onPressed: () {},
                    ),
                    TextButton(
                        onPressed: () => print('Recipe'),
                        child: Text(
                          'Recipe',
                          style: TextStyle(color: Colors.black),
                        ))
                  ],
                ),
              ],
            ),
            // Row(
            //   mainAxisAlignment: MainAxisAlignment.spaceAround,
            //   children: [Text("Reminder"), Text("News"), Text("Recipe")],
            // )
          ],
        ),
      ),
    );
  }
}

赞(0）回复(0）举报 2022-12-05

isr3a4wc4#

尝试下面的代码希望它对你有帮助，我已经尝试了两种方法使用列小部件和Gridview.builder（）。只是用你的图像替换我的图像

1.使用列小部件

Padding(
    padding: const EdgeInsets.all(10),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: const [
        ImageRow(
          imageUrl:
              'https://cdn.iconscout.com/icon/free/png-256/reminder-1605670-1361019.png',
          imageName: 'Reminder',
        ),
        ImageRow(
          imageUrl: 'https://cdn-icons-png.flaticon.com/512/21/21601.png',
          imageName: 'News',
        ),
        ImageRow(
          imageUrl:
              'https://cdn-icons-png.flaticon.com/512/1041/1041373.png',
          imageName: 'Recipe',
        ),
      ],
    ),
  ),

图像行类：

class ImageRow extends StatelessWidget {
  const ImageRow({
    Key? key,
    required this.imageName,
    required this.imageUrl,
  }) : super(key: key);
  final String imageUrl;
  final String imageName;

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Image.network(
          imageUrl,
          height: 50,
        ),
        const SizedBox(
          height: 5,
        ),
        Text(imageName),
      ],
    );
  }
}

2.使用Gridview构建器（）

在您的imageName和imageUrl上声明列表

List medicineInfo = [
    {
      'imageUrl':
          'https://cdn.iconscout.com/icon/free/png-256/reminder-1605670-1361019.png',
      'imageName': 'Reminder',
    },
    {
      'imageUrl': 'https://cdn-icons-png.flaticon.com/512/21/21601.png',
      'imageName': 'News',
    },
    {
      'imageUrl': 'https://cdn-icons-png.flaticon.com/512/1041/1041373.png',
      'imageName': 'Recipe',
    },
  ];

网格视图小工具：

Padding(
          padding: const EdgeInsets.all(20),
          child: GridView.builder(
            shrinkWrap: true,
            itemCount: medicineInfo.length,
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3,
              crossAxisSpacing: 20,
            ),
            itemBuilder: (context, index) {
              return Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Image.network(
                    medicineInfo[index]['imageUrl'],
                    height: 50,
                  ),
                  const SizedBox(
                    height: 5,
                  ),
                  Text(
                    medicineInfo[index]['imageName'],
                  ),
                ],
              );
            },
          ),
        ),

结果屏幕-〉x1c 0d1x

赞(0）回复(0）举报 2022-12-05

我来回答

flutter 如何在图像按钮下方放置文本？

4条答案

1.使用列小部件

2.使用Gridview构建器（）

相关问题

热门标签

最新问答