Flutter перекрывает несколько виджетов с динамической высотой с использованием Stack или любого другого подхода

На сегодняшний день Flutter - это довольно новый фреймворк, и у него много неудач, когда дело касается гибкого дизайна. То, чего я хочу достичь, проще продемонстрировать с помощью изображений.

Как вы видите, когда плитки имеют радиус границы, например, на изображениях, они должны перекрываться, чтобы не оставлять пустое пространство, как на первом изображении. Я добился этого с помощью виджета «Стек», конечно, задав фиксированную высоту для виджета выше и фиксированное верхнее заполнение для следующего виджета в цикле, так что я получил представление на 2-м и 3-м изображениях. Однако этот подход не позволяет мне использовать динамические размеры в каждом виджете, потому что я не могу получить высоту предыдущего виджета во время сборки.

Кто-нибудь сталкивался с таким или подобным паттерном пользовательского интерфейса, который может мне помочь в этом случае? Я ценю любое сотрудничество по этому поводу.

простые виджеты

перекрывающиеся виджеты

перекрывающиеся виджеты с верхним радиусом


flutter flutter-layout flutter-widget flutter-listview
person U.Savas    schedule 15.12.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я думаю, вам нужно рассчитывать вещи самостоятельно, не принимая во внимание то, как это было нарисовано, а точно, как вы хотите, чтобы это было нарисовано с помощью математики.

Конечно, чтобы найти динамические значения, вы можете использовать это внутри вашей функции build:

var screenSize = MediaQuery.of(context).size;
var width = screenSize.width;
var height = screenSize.height;

и на основании этого вы можете делать свои расчеты.

Если вам нужно получить эти значения до запуска build функций, по вашим initState или каким-либо другим причинам вы можете инициализировать этот виджет с помощью width и height, если вы понимаете, что я имею в виду, поскольку width и height экрана равны в каждом виджете.

person sonic    schedule 15.12.2020