#flutter #dart #flutter-layout
#трепетание #dart #флаттер-макет
Вопрос:
При использовании текста Unicode в flutter кажется, что в каждом символе много пробелов, что затрудняет выравнивание. В коде и на рисунке ниже я пытаюсь расположить 35 метров на перекрестных стрелках без пробелов между ними. Я также пытаюсь выровнять три звезды в начале по центру по вертикали со словом starburst, а затем выровнять по центру (35 м и стрелки), starburst и thee звезды, чтобы выровнять по центру друг с другом по вертикали.
Scaffold(
body: SafeArea(
child: Column(
children: [
Row(
children: [
Text(
'u{2605}' * 3,
style: TextStyle(
fontSize: 18.0,
),
),
Text(
'Starburst',
style: TextStyle(
fontSize: 28.0,
),
),
Column(
children: [
Text(
'35m',
style: TextStyle(
fontSize: 18.0,
),
),
Text(
'u{2194}',
style: TextStyle(fontSize: 35.0),
),
],
)
],
),
],
),
),
);
Ответ №1:
Присвоить свойству crossAxisAlignment строки значение CrossAxisAlignment.center
Row(
crossAxisAlignment: CrossAxisAlignment.center
children: [....
И
Присвоить свойству mainAxisAlignment столбца MainAxisAlignment.center
Column(
mainAxisAlignment: MainAxisAlignment.center
children: [...
Ответ №2:
Вы можете использовать Stack
вместо Column
и выровнять текст в соответствии с вашими спецификациями пользовательского интерфейса:
Вывод с использованием столбца:
Вывод с использованием стека:
Полный код:
return Scaffold(
body: SafeArea(
child: Column(
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
'u{2605}' * 3,
style: TextStyle(
fontSize: 18.0,
),
),
Text(
'Starburst',
style: TextStyle(
fontSize: 28.0,
),
),
// SizedBox(width: 5.0),
Container(
width: 50.0,
child: Center(
child: Stack(
children: [
Positioned(
top: 4,
child: Text(
'35m',
style: TextStyle(
fontSize: 18.0,
),
),
),
Text(
'u{2194}',
style: TextStyle(fontSize: 40.0),
),
],
),
),
),
],
),
],
),
),
);
Возможно, вам придется немного настроить Stack
дочерние элементы виджета, но я надеюсь, что этот ответ дает идею.