Советы по Flutter: как центрировать заголовок и кнопку «игнорировать» — подробное руководство

Метод 1: использование центрального виджета
Один из самых простых способов центрировать заголовок и кнопку игнорировать — использовать виджет Center. Виджет Centerразмещает дочерний виджет в центре доступного пространства.

Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Text(
        'Your Title',
        style: TextStyle(
          fontSize: 24,
          fontWeight: FontWeight.bold,
        ),
      ),
      SizedBox(height: 16),
      ElevatedButton(
        onPressed: () {
          // Handle button press
        },
        child: Text('Ignore'),
      ),
    ],
  ),
)

Метод 2. Использование виджета выравнивания.
Другой подход – использование виджета Align, который позволяет выравнивать дочерний виджет в соответствии с конкретными параметрами выравнивания.

Align(
  alignment: Alignment.center,
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Text(
        'Your Title',
        style: TextStyle(
          fontSize: 24,
          fontWeight: FontWeight.bold,
        ),
      ),
      SizedBox(height: 16),
      ElevatedButton(
        onPressed: () {
          // Handle button press
        },
        child: Text('Ignore'),
      ),
    ],
  ),
)

Метод 3: использование виджета стека
Виджет Stackполезен, когда вам нужно наложить виджеты друг на друга. Используя виджет Positioned, мы можем расположить заголовок и кнопку игнорировать в центре стека.

Stack(
  children: [
    Positioned.fill(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            'Your Title',
            style: TextStyle(
              fontSize: 24,
              fontWeight: FontWeight.bold,
            ),
          ),
          SizedBox(height: 16),
          ElevatedButton(
            onPressed: () {
              // Handle button press
            },
            child: Text('Ignore'),
          ),
        ],
      ),
    ),
  ],
)

В этой статье мы рассмотрели три различных метода центрирования заголовка и кнопки игнорирования в приложении Flutter. Используя виджеты Center, Alignи Stack, вы можете добиться желаемого макета. Не забудьте настроить стили и свойства в соответствии с вашими конкретными требованиями. Приятного кодирования!