Я не могу центрировать более одного виджета в стеке
По какой-то причине я хочу использовать стек, и все мои виджеты должны быть центрированы. Это нормально, когда я использую одно позиционирование и одно выравнивание. Однако использование второго виджета выравнивания не размещается под первым текстом.
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),
),
),
],
);
}
Я хочу достичь этого введите описание изображения здесь
У меня все работает, я не хочу, чтобы это было написано с фиксированными значениями пикселей.
Я думаю, что вам лучше использовать Align, и вы должны указать там фиксированное значение, однако, если вам не нравится фиксированный подход, лучший способ — использовать Column.
Если я использую столбец, я не могу использовать анимацию sizedTransition.
Можете ли вы дать мне весь экран, который вы хотите реализовать, я сделаю все возможное, чтобы предоставить вам наилучшее возможное решение.
Я добавил изображение.
Решение сработало? Пожалуйста, дайте мне знать, если у вас возникнут дополнительные проблемы.
Ответы 2
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(),
)
],
);
}
Да, это то, что я хочу. Однако мне нужно подумать о размере изображения прямо сейчас :) Должен автоматически рассчитываться дробь в зависимости от размера изображения. Использование статических жестко закодированных значений может вызвать проблемы.
Вы используете изображения из активов, поэтому я думаю, что не будет проблемой жестко закодировать их, если вы будете использовать Image.network(), тогда хитрость будет заключаться в использовании LayoutBuilder. Однако вы должны быть готовы к жестко закодированному значению.
Если вы хотите пойти с 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),
),
),
],
);
}
Будет ли
Positionedработать на вас или вы хотите пойти только сAlign?