Центрирование одного символа в контейнере с помощью флаттера
Я пытаюсь создать кнопку добавления, где значок внутри представляет собой простой символ «+», но по какой-то причине он просто находится внизу контейнера, а не в центре.
Проблемный текст в контейнере
Это структура, если необходимо, где у меня есть виджет Text внутри виджета Center, а также для textAlign установлено значение TextAlign.center.
Ниже я предоставил весь код, ведущий к виджету «Текст».
Column(
children: [
...,
Expanded(
child: Row(
children: [
Container(
width: 80,
alignment: Alignment.topCenter,
child: Column(
children: [
Padding(
padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
child: Container(
width: 60,
height: 60,
decoration: const BoxDecoration(
color: Colors.amber,
borderRadius: BorderRadius.all(Radius.circular(24))
),
child: const Center(
child: Text("+",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 70,
),
),
),
),
),
],
),
),
...,
],
),
)
],);
Обратите внимание, что я впервые использую флаттер.
Ответы 2
Таким образом, ваш размер шрифта слишком велик, а ваше поле слишком маленькое, чтобы показать, что «+» находится в центре поля.
Но он находится в центре, если вы используете эти значения для второго контейнера, вы увидите, что он находится в центре.
Column(
children: [
...,
Expanded(
child: Row(
children: [
Container(
width: 80,
alignment: Alignment.topCenter,
child: Column(
children: [
Padding(
padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
child: Container(
width: 80,
height: 80,
decoration: const BoxDecoration(
color: Colors.amber,
borderRadius: BorderRadius.all(Radius.circular(24))
),
child: const Center(
child: Text("+",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 70,
),
),
),
),
),
],
),
),
...,
],
),
)
],);
Итак, для этого используйте значок, и у вас будет лучшая презентация, вы можете увидеть пример здесь.
Row(
children: [
Container(
width: 80,
alignment: Alignment.topCenter,
child: Column(
children: [
Padding(
padding:
const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
child: Container(
width: 60,
height: 60,
decoration: const BoxDecoration(
color: Colors.amber,
borderRadius: BorderRadius.all(Radius.circular(24))),
child: const Center(
child: Icon(Icons.add, size: 35,)
),
),
),
],
),
)
],
),
Более лучшим и оптимальным способом будет использование виджета Material() и указание размера с помощью SizedBox(). А позже вы можете обернуть свой виджет Row()Column() и т. д.
SizedBox(
height: 80,
width: 80,
child: Material(
color: Colors.yellow,
borderRadius: BorderRadius.circular(20),
child: Center(
child: Text(
"+",
style: TextStyle(
fontSize: 50,
color: Colors.black,
),
textAlign: TextAlign.center,
),
),
),
)
Да, это выглядит великолепно, я обязательно попробую это, как только внесу некоторые другие незначительные изменения в код.
Это работает отлично, спасибо за предложение :)
О, хорошо, отлично, думаю, я переключусь на значок, я не знаю, почему я просто не сделал этого в первую очередь.