flutter 如何将文本对齐到按钮内?

3pmvbmvn  于 2022-12-05  发布在  Flutter
关注(0)|答案(3)|浏览(217)

我需要帮助我的应用程序,因为我是新的flutter。所以我有一个按钮,假设有一个文本内,但当我运行我的应用程序,文本不在按钮内,我不知道如何解决这个问题。所以这里是我的应用程序,当我运行它:

我使用MyButton作为按钮和文本,下面是我的按钮代码

_addTaskBar(){
    return Container(
            margin: const EdgeInsets.only(left: 20, right: 20, top: 5),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Container(
                  margin: const EdgeInsets.symmetric(horizontal: 20),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(DateFormat.yMMMMd().format(DateTime.now()),
                      style: subHeadingStyle,
                      ),
                      Text("Today", 
                      style: headingStyle,
                      )
                    ],
                  ),
                ),
                MyButton(label: "Add Reminder", onTap: ()=>Get.to(AddReminderPage()))
              ],
            ),
          );
  }

下面是我MyButton代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:medreminder/Reminder/ui/theme.dart';

class MyButton extends StatelessWidget {
  final String label;
  final Function()? onTap;
  const MyButton({super.key, required this.label, required this.onTap});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child:Container(
        width: 100,
        height: 50,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(20),
          color: Color(0xFFFB7B8E),
        ),
        child: Text(
          label,
          style: TextStyle(
            color: Colors.white,
          ),
        ),
      ) ,
    );
  }
}

任何帮助对我都很重要谢谢

gr8qqesn

gr8qqesn1#

您的文本现在与容器的左侧对齐。它看起来只是在外面,因为您有一个圆形按钮,但文本实际上正好在容器内部。您可能需要输入文本。若要在列中水平居中,请将crossAxisAlignment.start替换为crossAxisAlignment.center若要垂直居中,请在此行下面添加一行,并将其替换为mainAxisAlignment.center
如果文本仍然溢出,则可能需要将按钮放大
如果您希望文本换行,则可以将其放在Flexible组件中,如以下问题所示:Flutter- wrapping text
看看这个页面如何在列和行中对齐元素。https://docs.flutter.dev/codelabs/layout-basics

fjaof16o

fjaof16o2#

Center(
child: Text("add reminder"))
dgjrabp2

dgjrabp23#

可以将MyButton中的文本微件添加到中心微件中

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:medreminder/Reminder/ui/theme.dart';

class MyButton extends StatelessWidget {
  final String label;
  final Function()? onTap;
  const MyButton({super.key, required this.label, required this.onTap});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child:Container(
        width: 100,
        height: 50,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(20),
          color: Color(0xFFFB7B8E),
        ),
        child: Center(
      child:Text(
          label,
          style: TextStyle(
            color: Colors.white,
          )),
        ),
      ) ,
    );
  }
}

相关问题