Как можно изменить размеры виджетов Flutter относительно друг друга?
Я уже пару дней изучаю Flutter и все время сталкиваюсь с ситуацией, когда хочу уменьшить набор виджетов (также известных как Row, Column, Stack и т. д.) при сжатии экрана, подобно тому, что делает Flexible(). За исключением того, что в отличие от Flexible(), я хочу, чтобы все дочерние элементы уменьшались, когда контейнер сжимается, а не только самые большие элементы. Рассмотрим этот пример Column() (зеленый) с двумя дочерними элементами: красный дочерний элемент, соответствующий ширине его родителя, и синий дочерний элемент с половиной ширины родителя:
В приведенном выше случае, если бы зеленый Column() был ограничен таким образом, чтобы его ширина была меньше, вы бы получили что-то вроде этого:
Однако я хочу, чтобы каждый из дочерних элементов (красный/синий) масштабировал свою ширину/высоту относительно друг друга, например:
Как я могу это сделать?
В конкретном случае Column(), который я проиллюстрировал выше, мой обходной путь состоял в том, чтобы добавить Row(), содержащий синий виджет, а также Padding(), оба с одинаковыми свойствами гибкости, чтобы, когда Column() уменьшался, синий элемент масштабировался правильно. Я чувствую, что это хак, и это было бы не так осуществимо, если бы у меня было много элементов с разной шириной/выравниванием. Было бы кошмаром добавить один Padding() для элементов, выровненных по левому/правому краю, и два для элементов, выровненных по центру. Есть ли способ лучше?
Я также хотел бы узнать о подобном решении для использования Stack()s. Использование элемента Positional(), кажется, устанавливает ширину/высоту таким образом, что Stack() обрезает любое переполнение. Было бы неплохо иметь Stack(), который масштабирует всех своих дочерних элементов одинаково, как если бы это было одно изображение, и похоже на мой пример Column() выше.
Ответы 2
Вы можете взглянуть на класс FractionallySizedBox, вы можете указать widthFactor и heightFactor, например. 0,5, чтобы он всегда был вдвое меньше размера родительского контейнера.
Пример:
Flexible(
child: FractionallySizedBox(
widthFactor: 0.5,
heightFactor: 0.5,
alignment: FractionalOffset.centerLeft,
child: Container(
color: Colors.blue),
),
),
Ничего себе, я разобрался. Спасибо за вашу помощь!
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
static const String _title = 'Flutter Code Sample';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: const Text(_title)),
body: const MyStatelessWidget(),
),
);
}
}
class MyStatelessWidget extends StatelessWidget {
const MyStatelessWidget({super.key});
@override
Widget build(BuildContext context) {
return SizedBox.expand(
child: FractionallySizedBox(
widthFactor: 0.5,
heightFactor: 0.5,
alignment: FractionalOffset.center,
child: DecoratedBox(
decoration: BoxDecoration(
border: Border.all(
color: Colors.blue,
width: 4,
),
),
),
),
);
}
}
Виджет FractionallySizedBox — это виджет, размер дочернего элемента которого составляет часть всего доступного пространства. Чтобы было легче понять, как работает FractionallySizedBox
Потрясающий! Есть ли у вас какие-либо предложения по применению этого к Stack()?
Ничего себе, я разобрался. Спасибо за вашу помощь!
Сладкий, спасибо! Может у вас есть идеи, как заставить это работать с
Stack()?