Блог

Главная - Вопросы по программированию - Я не могу центрировать более одного виджета в стеке

Я не могу центрировать более одного виджета в стеке

#flutter #flutter-layout

#flutter #flutter-layout

Вопрос:

По какой-то причине я хочу использовать stack, и все мои виджеты должны быть центрированы. Это нормально, когда я использую один позиционированный и один выровненный. Однако использование второго виджета выравнивания не помещается под первым текстом.

 Widget _body() {
  return Stack(
    children: <Widget>[
      Positioned(
        left: 0,
        child: Text("Text here"),
      ),
      Align(
        child: Text(
          "First Centered Text",
          style: TextStyle(color: Colors.black87, fontSize: 30),
        ),
      ),
      Align(
        child: Text(
          "Second Centered Text",
          style: TextStyle(color: Colors.black87, fontSize: 30),
        ),
      ),
    ],
  );
}

Я хочу получить это
описание введите изображение здесь

Комментарии:

1. Будет Positioned работать для вас или вы хотите использовать только Align ?

2. У меня все работает, я не хочу, чтобы оно было записано с фиксированными значениями пикселей.

3. Я думаю, что вам лучше использовать Align , и вы должны указать там фиксированное значение, однако, если вам не нравится фиксированный подход, лучший способ — использовать Column .

4. Если я использую столбец, я не могу использовать анимацию sizedTransition.

5. Можете ли вы предоставить мне весь экран, который вы хотите реализовать, я сделаю все возможное, чтобы предоставить вам наилучшее возможное решение.

Ответ №1:

введите описание изображения здесь

 Widget _buildBody() {
  return Stack(
    alignment: Alignment.center,
    children: <Widget>[
      Align(
        alignment: Alignment(0, -0.95),
        child: Image.asset('assets/images/profile.jpg', width: 200, height: 200, fit: BoxFit.cover,),
      ),
      Align(
        alignment: Alignment(0, -0.35),
        child: Text("Centered Text"),
      ),
      Align(
        alignment: Alignment(0, -0.1),
        child: Text("Second centered text"),
      ),
      Align(
        alignment: Alignment(0, 0.1),
        child: CircularProgressIndicator(),
      )
    ],
  );
}

Комментарии:

1. Да, это то, что я хочу. Однако мне нужно подумать о размере изображения прямо сейчас 🙂 Он должен автоматически вычислять долю в зависимости от размера изображения. Использование статических жестко закодированных значений может вызвать проблемы.

2. Вы используете изображения из ресурсов, поэтому я думаю, что это не будет проблемой для жесткого кода, если бы вы использовали Image.network() , тогда хитрость заключалась бы в использовании LayoutBuilder then. Однако вы должны быть готовы использовать жестко закодированное значение.

Ответ №2:

Если вы хотите использовать Align вот что вам нужно. 

 Widget _body() {
  return Stack(
    alignment: Alignment.center,
    children: <Widget>[
      Positioned(
        top: 0,
        left: 0,
        child: Text("Text here"),
      ),
      Align(
        child: Text(
          "Centered Text",
          style: TextStyle(color: Colors.black87, fontSize: 30),
        ),
      ),
      Align(
        alignment: Alignment(0.0, 0.1), // change this value to place it below the 1st centered widget
        child: Text(
          "Second Centered Text",
          style: TextStyle(color: Colors.black87, fontSize: 30),
        ),
      ),
    ],
  );
}

введите описание изображения здесь