- 文章信息 - Author: Jack Lee (jcLee95)
Visit me at: https://jclee95.blog.csdn.net
Email: 291148484@163.com.
Shenzhen China
Address of this article:https://blog.csdn.net/qq_28550263/article/details/131419782
【介紹】：本文介紹Flutter 布局相關(guān)組件。
1. 概述
Flutter 中提供了豐富的原生布局組件?？梢詫?duì)這些組件分層以下幾類：
1. 線性布局（Linear Layout）：
- Row：水平方向的線性布局組件，可以包含多個(gè)子組件。
- Column：垂直方向的線性布局組件，可以包含多個(gè)子組件。
2. 層疊布局（Stacking Layout）：
- Stack：層疊布局組件，可以疊加多個(gè)子組件。
- Positioned：用于定位子組件在Stack中的位置的組件。
- IndexedStack：將子組件堆疊在一起的布局組件，但只顯示其中一個(gè)子組件，可以通過索引來控制顯示哪個(gè)子組件。
3. 彈性布局（Flex Layout）：
- Expanded：將子組件填充剩余空間的彈性布局組件。
- Flexible：彈性布局組件，可以根據(jù)比例分配可用空間。
4. 流式布局（Flow Layout）：
- Wrap：自動(dòng)換行的流式布局組件，可以容納多個(gè)子組件。
- Flow：根據(jù)子組件的大小和約束條件來自動(dòng)布局的自定義流式布局組件。
5. 表格布局（Table Layout）：
- Table：以表格形式布局子組件的組件，可以指定行和列的數(shù)量，并對(duì)每個(gè)單元格進(jìn)行定位。
6. 限制布局（Constraint Layout）：
- LimitedBox：根據(jù)最大寬度和高度限制子組件的尺寸的布局組件。
- ConstrainedBox：對(duì)子組件施加額外約束條件的布局組件。
7. 寬高比布局（Aspect Ratio Layout）：
- AspectRatio：根據(jù)給定的寬高比調(diào)整子組件的尺寸的布局組件。
這些分類可以用于根據(jù)布局需求選擇適合的原生布局組件，以構(gòu)建靈活且美觀的用戶界面。另外，還有一些其它的組件，實(shí)質(zhì)上也起到了布局的作用，如 GridView 組件、ListView組件等等，不過我們將在其它文章中介紹。
2. 線性布局組件
2.1 什么是線性布局
在Flutter中，線性布局是一種常用的布局方式，可以使用Row組件和Column組件來創(chuàng)建水平和垂直方向的線性布局。
2.2 Row 組件
Row組件用于創(chuàng)建水平方向的線性布局，可以包含多個(gè)子組件。可以通過設(shè)置屬性來調(diào)整子組件在水平方向上的對(duì)齊方式、間距和尺寸等。下面是一個(gè)使用Row組件創(chuàng)建水平線性布局的示例代碼：
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text('子組件1'),
Text('子組件2'),
Text('子組件3'),
],
)
在上面的示例中，Row組件包含了三個(gè)Text組件作為子組件，并使用mainAxisAlignment屬性設(shè)置了子組件在水平方向上的對(duì)齊方式為平均分布。子組件1、子組件2和子組件3將會(huì)平均分布在Row組件的水平空間上。
2.3 Column 組件
Column組件用于創(chuàng)建垂直方向的線性布局，可以包含多個(gè)子組件?？梢酝ㄟ^設(shè)置屬性來調(diào)整子組件在垂直方向上的對(duì)齊方式、間距和尺寸等。下面是一個(gè)使用Column組件創(chuàng)建垂直線性布局的示例代碼：
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text('子組件1'),
Text('子組件2'),
Text('子組件3'),
],
)
在上面的示例中，Column組件包含了三個(gè)Text組件作為子組件，并使用mainAxisAlignment屬性設(shè)置了子組件在垂直方向上的對(duì)齊方式為平均分布。子組件1、子組件2和子組件3將會(huì)平均分布在Column組件的垂直空間上。
通過使用Row組件和Column組件，您可以輕松創(chuàng)建水平和垂直方向的線性布局，并對(duì)子組件進(jìn)行靈活的排列和對(duì)齊。這些布局組件是構(gòu)建Flutter應(yīng)用程序用戶界面的重要工具。
3. 層疊布局（Stacking Layout）
3.1 什么是層疊布局
層疊布局（Stack）是一種特殊的布局方式，可以讓子組件按照不同的位置和順序堆疊在一起。通常，這種布局用于在同一區(qū)域顯示多個(gè)相互重疊的元素，例如懸浮按鈕、提示標(biāo)簽或視覺效果。
在Flutter中，層疊布局主要通過 Stack 和 Positioned 組件實(shí)現(xiàn)，其中Stack 組件負(fù)責(zé)將子組件堆疊在一起，而 Positioned 組件則用于指定相對(duì)于父 Stack 組件的位置。層疊布局可實(shí)現(xiàn)更豐富的視覺效果和高度定制的 UI設(shè)計(jì)。
3.2 Stack 組件
Stack組件用于創(chuàng)建層疊布局，它可以疊加多個(gè)子組件，并根據(jù)它們的位置進(jìn)行疊放。下面是一個(gè)使用Stack組件創(chuàng)建層疊布局的示例代碼：
Stack(
alignment: Alignment.center,
children: <Widget>[
Container(
width: 200,
height: 200,
color: Colors.blue,
),
Container(
width: 150,
height: 150,
color: Colors.red,
),
Container(
width: 100,
height: 100,
color: Colors.green,
),
],
)
在上面的示例中，Stack組件包含了三個(gè)Container組件作為子組件，它們分別具有不同的大小和顏色。Stack的alignment屬性被設(shè)置為Alignment.center，這意味著子組件將會(huì)在層疊布局的中心對(duì)齊。
3.3 Positioned 組件
Positioned 組件用于定位子組件在 Stack 布局中的位置。通過設(shè)置top、bottom、left、right等屬性，可以精確地控制子組件在Stack布局中的偏移和大小。下面是一個(gè)使用Positioned組件的示例代碼：
Stack(
children: <Widget>[
Container(
width: 200,
height: 200,
color: Colors.blue,
),
Positioned(
top: 50,
left: 50,
child: Container(
width: 100,
height: 100,
color: Colors.red,
),
),
],
)
在上面的示例中，Stack組件包含了兩個(gè)Container組件作為子組件。第二個(gè)Container組件使用Positioned組件進(jìn)行定位，設(shè)置top為50，left為50，這樣它將會(huì)相對(duì)于Stack布局的左上角向下和向右偏移，形成重疊的效果。
通過使用Stack組件和Positioned組件，您可以創(chuàng)建復(fù)雜的層疊布局，并精確控制子組件的位置和大小。這些布局組件為您構(gòu)建Flutter應(yīng)用程序的圖層效果提供了強(qiáng)大的工具。
一個(gè)完整的例子如：文章來源：http://www.zghlxwxcb.cn/news/detail-504702.html
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Stack Example')),
body: Center(
child: SizedBox(
width: 200,
height: 200,
child: Stack(
children: [
Container(
color: Colors.red,
),
Positioned(
left: 30,
top: 30,
child: Container(
width: 100,
height: 100,
color: Colors.green,
),
),
const Positioned(
right: 10,
bottom: 10,
child: Text(
'Stack',
style: TextStyle(fontSize: 24, color: Colors.white),
),
),
],
),
),
),
),
);
}
}
3.4 特殊的層疊布局：IndexedStack 組件
IndexedStack 是一個(gè)特殊類型的層疊布局，該布局允許顯示子組件中的單個(gè)元素，基于一個(gè)索引值。
在Flutter中，IndexedStack是一個(gè)繼承自 Stack 的特殊組件，它可以顯示一個(gè)列表中指定索引（index）的子組件。與Stack不同，IndexedStack 只顯示一個(gè)子組件，其他子組件在顯示時(shí)不可見。
例如：
IndexedStack(
index: 2,
children: <Widget>[
Container(
width: 200,
height: 200,
color: Colors.blue,
),
Container(
width: 200,
height: 200,
color: Colors.red,
),
Container(
width: 200,
height: 200,
color: Colors.green,
),
],
)
在上面的示例中，IndexedStack組件包含了三個(gè)Container組件作為子組件。通過設(shè)置index屬性為2，表示顯示索引為2的子組件，即綠色的Container組件。藍(lán)色和紅色的Container組件則被隱藏。
通過使用IndexedStack組件，您可以輕松創(chuàng)建堆疊布局，并根據(jù)需要顯示不同的子組件。這種布局方式特別適用于在同一個(gè)位置上切換顯示不同內(nèi)容的場景，如切換不同的頁面或組件等。
官方一個(gè)完整的例子如：
該例子來源于此頁面：https://api.flutter.dev/flutter/widgets/IndexedStack-class.html
import 'package:flutter/material.dart';
void main() => runApp(const IndexedStackApp());
class IndexedStackApp extends StatelessWidget {
const IndexedStackApp({super.key});
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('IndexedStack Sample')),
body: const IndexedStackExample(),
),
);
}
}
class IndexedStackExample extends StatefulWidget {
const IndexedStackExample({super.key});
State<IndexedStackExample> createState() => _IndexedStackExampleState();
}
class _IndexedStackExampleState extends State<IndexedStackExample> {
List<String> names = <String>['Dash', 'John', 'Mary'];
int index = 0;
final TextEditingController fieldText = TextEditingController();
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(
width: 300,
child: TextField(
decoration: const InputDecoration(
border: OutlineInputBorder(),
hintText: 'Enter the name for a person to track',
),
onSubmitted: (String value) {
setState(() {
names.add(value);
});
fieldText.clear();
},
controller: fieldText,
),
),
const SizedBox(height: 50),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
GestureDetector(
onTap: () {
setState(() {
if (index == 0) {
index = names.length - 1;
} else {
index -= 1;
}
});
},
child: const Icon(Icons.chevron_left, key: Key('gesture1')),
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
IndexedStack(
index: index,
children: <Widget>[
for (String name in names) PersonTracker(name: name)
],
)
],
),
GestureDetector(
onTap: () {
setState(() {
if (index == names.length - 1) {
index = 0;
} else {
index += 1;
}
});
},
child: const Icon(Icons.chevron_right, key: Key('gesture2')),
),
],
)
],
);
}
}
class PersonTracker extends StatefulWidget {
const PersonTracker({super.key, required this.name});
final String name;
State<PersonTracker> createState() => _PersonTrackerState();
}
class _PersonTrackerState extends State<PersonTracker> {
int counter = 0;
Widget build(BuildContext context) {
return Container(
key: Key(widget.name),
decoration: BoxDecoration(
color: const Color.fromARGB(255, 239, 248, 255),
border: Border.all(color: const Color.fromARGB(255, 54, 60, 244)),
borderRadius: const BorderRadius.all(Radius.circular(10)),
),
padding: const EdgeInsets.all(16.0),
child: Column(
children: <Widget>[
Text('Name: ${widget.name}'),
Text('Score: $counter'),
TextButton.icon(
key: Key('increment${widget.name}'),
icon: const Icon(Icons.add),
onPressed: () {
setState(() {
counter += 1;
});
},
label: const Text('Increment'),
)
],
),
);
}
}
這個(gè)示例顯示了一個(gè) IndexedStack 組件，用于從一系列卡片中一次展示一張卡片，每張卡片都保持各自的狀態(tài)。通過輸入框輸入可以增加卡片。
4. 彈性布局（Flex Layout）
在Flutter中，彈性布局是一種常用的布局方式，可以使用Expanded組件和Flexible組件來實(shí)現(xiàn)彈性布局。
4.1 Expanded 組件
Expanded 組件是彈性布局的關(guān)鍵組件之一，它用于將子組件 填充剩余的可用空間。
Expanded 組件通常作為父組件的子組件，并且會(huì)將剩余的空間按比例分配給其中的子組件。
例如：
Row(
children: <Widget>[
Expanded(
child: Container(
height: 100,
color: Colors.blue,
),
),
Expanded(
child: Container(
height: 100,
color: Colors.red,
),
),
Expanded(
child: Container(
height: 100,
color: Colors.green,
),
),
],
)
在上面的示例中，Expanded 組件被用作 Row 布局的子組件，它包含了三個(gè) Container 組件作為子組件。
每個(gè) Expanded 組件都會(huì)自動(dòng)填充剩余的水平空間，并按比例分配給子組件，從而使它們平均分布在 Row 布局中。
一個(gè)完整的例子如：
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Expanded組件示例')),
body: Column(
children: <Widget>[
Row(children: [
Expanded(
flex: 1,
child: Container(
color: Colors.red,
child: const Text('第一個(gè)組件'),
),
),
Expanded(
flex: 2,
child: Container(
color: Colors.green,
child: const Text('第二個(gè)組件'),
),
),
]),
Row(children: [
Expanded(
flex: 3,
child: Container(
color: Colors.blue,
child: const Text('第三個(gè)組件'),
),
),
Expanded(
flex: 4,
child: Container(
color: Colors.orange,
child: const Text('第四個(gè)組件'),
),
),
]),
],
),
),
);
}
}
在這個(gè)例子中，有兩個(gè) Row，每個(gè) Row 中有兩個(gè) Expanded 組件，分別設(shè)置了不同的flex權(quán)重。每個(gè) Expanded 組件包含一個(gè)顏色填充的容器以及文本
4.2 Flexible 組件
Flexible組件也是實(shí)現(xiàn)彈性布局的重要組件，它可以根據(jù)給定的比例來分配可用的空間。與Expanded組件不同的是，F(xiàn)lexible組件可以靈活地調(diào)整空間分配的比例，以滿足布局的需求。下面是一個(gè)使用Flexible組件的示例代碼：
Row(
children: <Widget>[
Flexible(
flex: 2,
child: Container(
height: 100,
color: Colors.blue,
),
),
Flexible(
flex: 1,
child: Container(
height: 100,
color: Colors.red,
),
),
Flexible(
flex: 1,
child: Container(
height: 100,
color: Colors.green,
),
),
],
)
在上面的示例中，F(xiàn)lexible組件被用作Row布局的子組件，它包含了三個(gè)Container組件作為子組件。每個(gè)Flexible組件通過設(shè)置flex屬性來定義空間分配的比例，這樣第一個(gè)子組件會(huì)占據(jù)2/4的空間，而后兩個(gè)子組件會(huì)各自占據(jù)1/4的空間，從而實(shí)現(xiàn)了不同的比例分配。
一個(gè)完整的例子如：
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Flexible組件示例')),
body: Column(
children: <Widget>[
Row(children: [
Flexible(
flex: 1,
fit: FlexFit.tight,
child: Container(
color: Colors.red,
child: const Text('第一個(gè)組件'),
),
),
Flexible(
flex: 2,
fit: FlexFit.loose,
child: Container(
color: Colors.green,
child: const Text('第二個(gè)組件'),
),
),
]),
Row(children: [
Flexible(
flex: 3,
fit: FlexFit.tight,
child: Container(
color: Colors.blue,
child: const Text('第三個(gè)組件'),
),
),
Flexible(
flex: 4,
fit: FlexFit.loose,
child: Container(
color: Colors.orange,
child: const Text('第四個(gè)組件'),
),
),
]),
],
),
),
);
}
}
在此示例中，我們使用了兩個(gè)Row 組件，其中每個(gè) Row 包含兩個(gè) Flexible 組件。每個(gè) Flexible 組件內(nèi)部有一個(gè)帶顏色的容器。
與 Expanded 類似，通過設(shè)置 flex 屬性，可以控制子組件在行或列中占據(jù)的空間。此外，Flexible 組件還有一個(gè) fit 屬性，允許您設(shè)置子組件如何適應(yīng)所分配的空間。在上面的示例中，我們所設(shè)置的 FlexFit.tight 指示子組件要占據(jù)所有可用空間，而 FlexFit.loose 則允許子組件在占用所需空間后仍然保持可用空間。
5. 流式布局（Flow Layout）
5.1 什么是流式布局
在 Flutter 中，流式布局指的是一種將子組件排列在多行或多列的布局方式，它可以自動(dòng)根據(jù)屏幕尺寸調(diào)整子組件的排列。Flutter 框架提供了兩種原生流式布局組件：
- Wrap 組件用于將一系列子組件按行排列，并在子組件長度超出容器寬度時(shí)自動(dòng)換行。
-
Flow 組件是一個(gè)高度可定制的流式布局組件。
下面我們一一介紹之。
5.2 Wrap 組件
Wrap 組件用于創(chuàng)建 自動(dòng)換行的流式布局，它可以容納多個(gè)子組件，并在達(dá)到容器邊界時(shí)自動(dòng)換行。下面是一個(gè)使用 Wrap 組件創(chuàng)建流式布局的示例代碼：
Wrap(
spacing: 8.0,
runSpacing: 8.0,
children: <Widget>[
Chip(
label: Text('標(biāo)簽1'),
backgroundColor: Colors.blue,
),
Chip(
label: Text('標(biāo)簽2'),
backgroundColor: Colors.red,
),
Chip(
label: Text('標(biāo)簽3'),
backgroundColor: Colors.green,
),
Chip(
label: Text('標(biāo)簽4'),
backgroundColor: Colors.orange,
),
],
)
在上面的示例中，Wrap組件包含了四個(gè)Chip組件作為子組件。Wrap組件的spacing屬性設(shè)置了子組件之間的水平間距為8.0，而runSpacing屬性設(shè)置了子組件在新行上的垂直間距為8.0。當(dāng)子組件的總寬度超過Wrap組件的寬度時(shí)，Wrap組件會(huì)自動(dòng)將子組件放置在新行上。
5.3 Flow 組件
Flow組件是Flutter中一個(gè)強(qiáng)大且靈活的布局組件，它允許開發(fā)者自定義子組件在父組件中的位置。
使用Flow組件時(shí)，我們需要提供一個(gè)FlowDelegate對(duì)象，該對(duì)象負(fù)責(zé)控制子組件如何布局及排列。
5.3.1 使用 Flow 組件
要使用 Flow 組件，首先需要?jiǎng)?chuàng)建一個(gè)繼承自FlowDelegate的子類，并實(shí)現(xiàn)其中的三個(gè)方法：
-
paintChildren：負(fù)責(zé)繪制子組件。 -
shouldRepaint：確定是否重繪子組件。通常在子組件位置或外觀發(fā)生修改時(shí)返回true。 -
getSize：返回Flow組件的尺寸。
以下是一個(gè)簡單的示例，展示了如何創(chuàng)建一個(gè)簡單的自定義FlowDelegate子類：
class CustomFlowDelegate extends FlowDelegate {
void paintChildren(FlowPaintingContext context) {
// 實(shí)現(xiàn)子組件在父組件中的布局邏輯
}
bool shouldRepaint(FlowDelegate oldDelegate) {
// 確定是否需要重繪子組件
}
Size getSize(BoxConstraints constraints) {
// 返回Flow組件的尺寸
}
}
5.3.2 使用自定義FlowDelegate
創(chuàng)建好自定義的FlowDelegate子類后，我們可以在使用Flow組件時(shí)指定該子類的一個(gè)實(shí)例，如下所示：
Flow(
delegate: CustomFlowDelegate(),
children: <Widget>[
// 添加子組件
],
)
5.3.3 一個(gè) Flow 組件的完整例子
一個(gè)完整例子如：
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Flow組件示例')),
body: Flow(
delegate: MyFlowDelegate(),
children: List.generate(
6,
(index) => Container(
height: 50,
width: 50,
color: Colors.primaries[index],
child: Center(child: Text('${index + 1}')),
),
),
),
),
);
}
}
class MyFlowDelegate extends FlowDelegate {
void paintChildren(FlowPaintingContext context) {
double x = 10.0;
double y = 10.0;
for (int i = 0; i < context.childCount; i++) {
x += 60.0;
if (x > context.size.width - 50) {
x = 10.0;
y += 60.0;
}
context.paintChild(i, transform: Matrix4.translationValues(x, y, 0.0));
}
}
bool shouldRepaint(MyFlowDelegate oldDelegate) => true;
Size getSize(BoxConstraints constraints) {
return constraints.constrain(const Size(double.infinity, 300.0));
}
}
Flow 組件具有很高的自適應(yīng)能力，能夠?qū)ψ咏M件的位置和布局進(jìn)行精細(xì)控制。雖然Flow組件的使用場景相對(duì)少見，但在需要高度自定義布局的情況下，F(xiàn)low組件將非常有用。
6. 表格布局（Table Layout）
在Flutter中，表格布局是一種常用的布局方式，可以使用Table組件來創(chuàng)建具有行和列的表格布局。
6.1 Table組件
Table組件用于創(chuàng)建表格布局，它以行和列的形式排列子組件。每個(gè)子組件被稱為一個(gè)單元格，并根據(jù)給定的行和列進(jìn)行定位。下面是一個(gè)使用Table組件創(chuàng)建表格布局的示例代碼：
Table(
border: TableBorder.all(),
children: [
TableRow(
children: [
TableCell(
child: Text('單元格1'),
),
TableCell(
child: Text('單元格2'),
),
],
),
TableRow(
children: [
TableCell(
child: Text('單元格3'),
),
TableCell(
child: Text('單元格4'),
),
],
),
],
)
在上面的示例中，Table組件包含了兩個(gè)TableRow組件作為子組件，每個(gè)TableRow組件代表一行。每行又包含了兩個(gè)TableCell組件作為子組件，每個(gè)TableCell組件代表一個(gè)單元格。通過嵌套的方式，您可以創(chuàng)建具有多行多列的表格布局。
Table組件的border屬性可以設(shè)置表格的邊框樣式，以增加可讀性和美觀性。
一個(gè)完整的例子如：
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Table Example')),
body: Center(
child: Container(
padding: const EdgeInsets.all(16),
child: Table(
border: TableBorder.all(color: Colors.black, width: 1),
defaultColumnWidth: const IntrinsicColumnWidth(),
columnWidths: const {
0: FlexColumnWidth(1),
1: FlexColumnWidth(3),
},
children: const [
TableRow(
children: [
TableCell(
child: Text('Header 1', textAlign: TextAlign.center)),
TableCell(
child: Text('Header 2', textAlign: TextAlign.center)),
],
),
TableRow(
children: [
TableCell(
child:
Text('Row 1 Col 1', textAlign: TextAlign.center)),
TableCell(
child:
Text('Row 1 Col 2', textAlign: TextAlign.center)),
],
),
TableRow(
children: [
TableCell(
child:
Text('Row 2 Col 1', textAlign: TextAlign.center)),
TableCell(
child:
Text('Row 2 Col 2', textAlign: TextAlign.center)),
],
),
],
),
),
),
),
);
}
}
7. 限制布局（Constraint Layout）
在Flutter中，限制布局是一種常用的布局方式，可以使用LimitedBox組件和ConstrainedBox組件來實(shí)現(xiàn)對(duì)子組件尺寸的限制和約束。
7.1 LimitedBox 組件
LimitedBox組件用于 限制子組件的最大尺寸，可以通過設(shè)置maxWidth和maxHeight屬性來限制子組件的寬度和高度。LimitedBox組件會(huì)盡量將子組件的尺寸限制在指定的最大尺寸范圍內(nèi)。
注意：只有在父組件沒有限制子組件大小時(shí)，LimitedBox才會(huì)發(fā)揮作用。
例如，當(dāng)子組件嵌套在一個(gè)無限寬高的組件（如ListView）中時(shí)，可以使用 LimitedBox 來限制子組件的大?。?/p>
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('LimitedBox Example')),
body: ListView(
children: const [
LimitedBoxWidget(),
LimitedBoxWidget(),
LimitedBoxWidget(),
],
),
),
);
}
}
class LimitedBoxWidget extends StatelessWidget {
const LimitedBoxWidget({super.key});
Widget build(BuildContext context) {
return LimitedBox(
maxWidth: 100,
maxHeight: 100,
child: Container(
width: double.infinity,
height: double.infinity,
color: Colors.blue,
child: const Center(
child: Text(
'LimitedBox',
style: TextStyle(fontSize: 24, color: Colors.white),
),
),
),
);
}
}
在這個(gè)示例中，我們在一個(gè)ListView中創(chuàng)建了3個(gè)LimitedBoxWidget。LimitedBoxWidget 是一個(gè)自定義的 StatelessWidget，其內(nèi)部包含一個(gè) LimitedBox 組件和一個(gè)寬高均為 double.infinity 的藍(lán)色 Container。
由于ListView 本身沒有限制子組件的大小，LimitedBox 會(huì)將子組件的寬高限制在最大 100 像素，從而創(chuàng)建一個(gè)等大小的藍(lán)色矩形。在這種情況下，LimitedBox 的限制生效，以展示如何在特定場景下限制子組件的大小。
7.2 ConstrainedBox 組件
ConstrainedBox組件用于對(duì)子組件的尺寸進(jìn)行約束和限制，可以通過設(shè)置constraints屬性來指定約束條件。constraints屬性接受BoxConstraints對(duì)象，該對(duì)象定義了子組件的最小和最大寬度和高度等約束。下面是一個(gè)使用ConstrainedBox組件對(duì)子組件尺寸進(jìn)行約束的示例代碼：
ConstrainedBox(
constraints: BoxConstraints(
minWidth: 100,
maxWidth: 200,
minHeight: 50,
maxHeight: 100,
),
child: Container(
width: 150,
height: 80,
color: Colors.red,
),
)
在上面的示例中，ConstrainedBox組件的constraints屬性設(shè)置了子組件的最小寬度為100，最大寬度為200，最小高度為50，最大高度為100。子組件Container的寬度為150，高度為80，但由于ConstrainedBox的約束條件，實(shí)際上顯示的寬度為150（在最小和最大寬度范圍內(nèi)），高度為80（在最小和最大高度范圍內(nèi)）。
再一個(gè)完整例子如：
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('ConstrainedBox Example')),
body: Center(
child: ConstrainedBox(
constraints: const BoxConstraints(
maxWidth: 100,
),
child: Container(
color: Colors.blue,
child: const Text(
'ConstrainedBox',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 24, color: Color.fromARGB(255, 168, 44, 44)),
),
),
),
),
),
);
}
}
8. 寬高比布局：AspectRatio組件
在Flutter中，寬高比布局是一種常用的布局方式，可以使用AspectRatio組件來實(shí)現(xiàn)根據(jù)指定寬高比例調(diào)整子組件的尺寸。AspectRatio，它通過設(shè)置aspectRatio屬性來指定寬高比例。AspectRatio組件會(huì)根據(jù)指定的寬高比例調(diào)整子組件的尺寸，以保持寬高比例不變。下面是一個(gè)使用AspectRatio組件創(chuàng)建寬高比布局的示例代碼：
AspectRatio(
aspectRatio: 16 / 9,
child: Container(
color: Colors.blue,
),
)
在上面的示例中，AspectRatio組件的aspectRatio屬性設(shè)置為16 / 9，表示寬高比為16:9。子組件Container的尺寸會(huì)根據(jù)這個(gè)寬高比例進(jìn)行調(diào)整，以保持16:9的寬高比。
可以根據(jù)實(shí)際需求調(diào)整AspectRatio組件的aspectRatio屬性，從而實(shí)現(xiàn)不同的寬高比例布局。這種布局方式特別適用于需要固定寬高比例的場景，如展示圖片或視頻的封面、輪播圖等。
注意：AspectRatio組件不會(huì)對(duì)子組件的寬高進(jìn)行強(qiáng)制調(diào)整，而是通過調(diào)整父組件的尺寸來保持寬高比例不變。如果子組件的寬高比例與AspectRatio組件的aspectRatio不一致，子組件可能會(huì)被裁剪或留有空白區(qū)域。
一個(gè)完整的例子如：
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('AspectRatio Example')),
body: Center(
child: Container(
width: 200,
height: 200,
color: Colors.yellow,
child: AspectRatio(
aspectRatio: 16 / 9,
child: Container(
color: Colors.blue,
child: const Center(
child: Text(
'16:9',
style: TextStyle(
fontSize: 24,
color: Colors.white,
),
),
),
),
),
),
),
),
);
}
}
文章來源地址http://www.zghlxwxcb.cn/news/detail-504702.html
到了這里，關(guān)于Flutter開發(fā)筆記：Flutter 布局相關(guān)組件的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
