This content originally appeared on DEV Community and was authored by Gülsen 🦋
Stack widget
Stack widget widget'ları üst üste yerleştirmek (veya yığmak) için kullanılır.
Yukarıdaki resimde Güneş, bulutlar ve içerik, birbirinin üzerine yığılmış farklı widget'lardır. Bir stack'in tüm çocukları ya konumlanmıştır ya da (varsayılan olarak) konumlanmamıştır.
Stack widget alt widget'larını sol üst köşelerine göre hizalar ve bunları birbiri ardına yan yana yerleştirir. Alignment özelliği ile bir stack'e hangi yöne hizalanacağını söyleyebilirsiniz. Örneğin, hizalamayı horizontal (yatay olarak) ayarlarsanız, stack bir row gibi davranacaktır. Bir çocuk açıkça konumlandırılmadığı sürece stack bir column gibi çalışır ve çocukları dikey olarak yerleştirir.
Bir widget'ı konumlandırmak için onu Positioned widget'ına sararsınız.
positioned widget şu özelliklere sahiptir: top, left, right, bottom, width, and height. Bunların hiçbirini ayarlamanız gerekmez, ancak en fazla iki horizontal properties (yatay özellik) (left, right, and width) ve iki vertical properties (dikey özellik) (top, bottom, and height) ayarlayabilirsiniz. Bu özellikler, Flutter'a widget'ın nereye boyanacağını söyler. Çocuklar, RenderStack algoritması tarafından boyanır:
• Konumlandırılmamış tüm çocukları bir row veya column'un yapacağı şekilde düzenler. Bu, stack'e son boyutunu söyler. Konumlandırılmamış çocuk yoksa stack mümkün olduğunca büyük olmaya çalışır.
•top, left vb özelliklerini kullanarak konumlandırılmış tüm alt öğelerini (children) stack'in render box'ına göre düzenler. Konumlandırılmış özellikler(positioned properties), Flutter'a stack'in alt öğelerini paralel kenarına göre nereye yerleştireceğini söyler.
Örneğin, top: 10.0, positioned widget'ı stack box'ının üst kenarından 10.0 piksel içe yerleştirir.
Stack Widget'ları birbirinin üzerine veya açık bir şekilde birbiriyle ilişkili olarak yerleştirmek istiyorsanız, kullanabileceğiniz bir widget'tır.
Table widget
Adından da anlaşılacağı üzere tablo oluşturmak için kullanılır.
Table gördüğümüz diğer layout widget'larından daha katıdır, çünkü tabloların (teoride) tek bir amacı vardır: verileri okunabilir bir şekilde görüntülemek. Tablolar, widget öğelerini sütunlar ve satırlar halinde sıralar ve tablodaki her hücre, satırdaki diğer tüm hücrelerle aynı yüksekliğe ve sütunundaki her pencere öğesiyle aynı genişliğe sahiptir. Flutter tabloları önceden belirgin column width'leri gerektirir ve hiçbir tablo hücresi boş olamaz. Bu kurallar göz önüne alındığında, diğer multi-child widget'lara benzer şekilde kodda bir tablo uygularız.
Table(
columnWidths: Map<int, TableColumnWidth>{},
border: Border(),
defaultColumnWidth: TableColumnWidth(),
defaultVerticalAlignment:
TableCellVerticalAlignment(),
children: List<TableRow>[]
);
Table widget ile çalışırken dikkat etmeniz gerekenler:
columnWidths kullanmak zorunda değilsiniz ama defaultColumnWidth parametresi null olamaz.
defaultColumnWidth default bir argumana sahiptir.
FlexColumnWidth(1.0), yani hiçbir şey iletmeniz gerekmez. Ama null olamaz.
defaulColumnWidth: null bir hata verir. Ancak defaultColumnWidth'in varsayılan bir bağımsız değişkeni olduğundan, her sütunun aynı boyutta olmasını ve tablonun mümkün olduğunca fazla genişlikte olmasını istiyorsanız bunu yok sayabilirsiniz.
Column width'lerini, bir map'i columnWidths'e ileterek tanımlarsınız. Map, key olarak column'un index değerini(0'dan başlayarak) ve column'un ne kadar yer kaplamasını istediğiniz değeri alır.
Border isteğe bağlıdır.
TableCellVerticalAlignment, yalnızca row'larınızın children'ları TableCells ise çalışır.
Aşağıdaki kod, bazı satırların boyutlarını tanımlar. 1. sütunun genişliği için bir tanım olmadığına dikkat edin!
Table(
columnWidths: {
0: FixedColumnWidth(100.0),
2: FixedColumnWidth(20.0),
3: FixedColumnWidth(20.0),
},
defaultVerticalAlignment:
TableCellVerticalAlignment.middle,
children: <TableRow>[...],
);
TableRow : Bir table row, normal bir row'dan daha basittir. İki önemli yapılandırması vardır:
Bir tablodaki her row'un eşit sayıda çocuğu olmalıdır.
Çocukların alt widget ağaçlarında TableCell'i kullanabilirsiniz, ancak kullanmak zorunda değilsiniz. TableCell, widget ağacında onun üzerinde bir yerde, ancestor bir TableRow'a sahip olduğu sürece, TableRow'un doğrudan bir çocuğu olmak zorunda değildir.
Dart'ın List.generate() constructor'ından widget'lar oluşturma
Tablonun child özelliğine bir liste iletmek yerine, widget'ları döndüren fonksiyonları, constructor'ları ve class'ları kullanabiliriz.
Table(
columnWidths: {
0: FixedColumnWidth(100.0),
2: FixedColumnWidth(20.0),
3: FixedColumnWidth(20.0),
},
defaultVerticalAlignment: TableCellVerticalAlignment.middle,
children: List.generate(7, (int index) {
ForecastDay day = forecast.days[index];
Weather dailyWeather =
forecast.days[index].hourlyWeather[0];
final weatherIcon =
_getWeatherIcon(dailyWeather);
return TableRow(
children: [
// ....
],
); // TableRow
});
); // Table
Bu List.generate constructor fonksiyonu, derleme zamanında yürütülür. List.generate'i bir döngü olarak düşünebilirsiniz. İşlevsel olarak şöyle bir şey yazmakla aynıdır:
List<Widget> myList = [];
for (int i = 0; i < 7; i++) {
myList.add(TableRow(...));
}
Tıpkı for döngüsü gibi, örnek koddaki List.generate constructor'ı , verdiğiniz kodu yedi kez çalıştıracaktır. (Yine de her döngü yinelemesindeki index'in aslında 0-6 arasında olacağını unutmamak önemlidir.)
List.generate bir Dart özelliğidir ve Flutter'a özgü değildir. Yine de bir row, column, table, veya list için birkaç widget oluşturmanız gerektiğinde Flutter'da oldukça kullanışlıdır.
List.generate'i kullanmasaydık, şuna benzeyen daha ayrıntılı bir kod yazmamız gerekirdi:
Table (
children: [
TableRow(
children: [
TableCell(),
TableCell(),
TableCell(),
TableCell(),
]
),
TableRow(
children: [
TableCell(),
TableCell(),
TableCell(),
TableCell(),
]
),
//... etc., 5 more times
]
)
TableCell, Text, Icon ve Padding'in tümü kullanılır.
children: List.generate(7, (int index) {
ForecastDay day = forecast.days[index];
Weather dailyWeather = forecast.days[index].hourlyWeather[0];
final weatherIcon = _getWeatherIcon(dailyWeather);
return TableRow(
children: [
TableCell(
child: const Padding(
padding: const EdgeInsets.all(4.0),
child: ColorTransitionText(
text: DateUtils.weekdays[dailyWeather.dateTime.weekday],
style: textStyle,
animation: textColorTween.animate(controller),
),
),
),
TableCell(
child: ColorTransitionIcon(
icon: weatherIcon,
animation: textColorTween.animate(controller),
size: 16.0,
),
),
TableCell(
child: ColorTransitionText(
text: _temperature(day.max).toString(),
style: textStyle,
animation: textColorTween.animate(controller),
),
),
TableCell(
child: ColorTransitionText(
text: _temperature(day.min).toString(),
style: textStyle,
animation: textColorTween.animate(controller),
),
),
],
);
}),
// ...
VerticalDirection.up Sütunun default akışını tersine çevirmek için kullanılır.
TabBar widget
Sekmeler(Tabs), mobil uygulamalarda yaygın olarak kullanılan bir UI öğesidir. Flutter Material library, sekmelerle çalışmayı oldukça kolaylaştıran yerleşik sekme widget'ları sağlar.
Devamı sonra... 😴
Resource: Flutter in Action chapter 4
This content originally appeared on DEV Community and was authored by Gülsen 🦋
Gülsen 🦋 | Sciencx (2022-03-27T18:16:33+00:00) Flutter Layout ve UI Widget’ları. Retrieved from https://www.scien.cx/2022/03/27/flutter-layout-ve-ui-widgetlari/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.