《深入浅出Dart》Widget和布局

Widget和布局

Flutter的布局与HTML/CSS布局方式上的写法有很大的不同，Flutter使用基于组件树的布局模型，其中每个组件都有自己的布局和渲染逻辑。相比之下，HTML/CSS使用基于盒模型的布局，其中元素通过框模型和定位属性进行布局。

Widget：Flutter用户界面的构建块

在Flutter中，一切皆是Widget。Widgets是Flutter用户界面的基本构建块，用于描述应用程序在给定其当前配置和状态的情况下应该如何显示。通过组合不同的Widget，我们可以构建出复杂、美观的用户界面。

Flutter中的Widget分为两类：

StatelessWidget

StatelessWidget是不可变的，一旦创建就不能更改。它们通常用于表示那些没有状态改变的静态UI元素。例如，Icon、Text、Container等都是无状态的Widget。

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('Hello World'),
    );
  }
}
1
2
3
4
5
6
7
8

StatefulWidget

StatefulWidget是有状态的，可以根据应用程序的状态和用户交互来改变。当状态发生变化时，StatefulWidget会自动重绘UI。常见的有状态Widget包括按钮、输入框、列表等。

class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  bool _isPressed = false;

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: () {
        setState(() {
          _isPressed = !_isPressed;
        });
      },
      child: Text(_isPressed ? 'Pressed' : 'Not Pressed'),
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

更多关于Widget的信息，你可以参考Flutter Widget介绍。

布局组件：构建灵活的用户界面

在Flutter中，有多种布局组件可供选择，用于在屏幕上排列和定位Widget。以下是几个常用的布局组件：

Container

Container是一个多功能的容器，可以用于装饰、定位和约束其子Widget。你可以设置它的大小、颜色、边距等。

Container(
  color: Colors.blue,
  width: 200,
  height: 200,
  child: Text('Hello'),
)
1
2
3
4
5
6

Row和Column

Row和Column是用于水平和垂直排列子Widget的强大布局组件。你可以在它们内部添加各种子Widget，并使用mainAxisAlignment和crossAxisAlignment来调整对齐方式。

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
    Icon(Icons.star),
    Icon(Icons.star),
    Icon(Icons.star),
  ],
)
1
2
3
4
5
6
7
8
9

Stack

Stack允许将多个子Widget堆叠在一起，可以通过定位、对齐和尺寸调整来控制它们的位置。

Stack(
  alignment: Alignment.center,
  children: <Widget>[
    Container(color: Colors.red, width: 200, height: 200),
    Container(color: Colors.green, width: 150, height: 150),
    Container(color: Colors.blue, width: 100, height: 100),
  ],
)
1
2
3
4
5
6
7
8

ListView

ListView是一个滚动视图，可用于显示可滚动的列表。你可以使用ListView.builder或ListView.separated来构建列表。

ListView.builder(
  itemCount: 100,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text('Item $index'),
    );
  },
)
1
2
3
4
5
6
7
8

Expanded

Expanded是一个灵活的布局组件，用于占据剩余可用空间。它通常与Row和Column一起使用。

Row(
  children: <Widget>[
    Expanded(
      child: Container(color: Colors.red),
    ),
    Expanded(
      child: Container(color: Colors.green),
    ),
  ],
)
1
2
3
4
5
6
7
8
9
10

这只是布局组件中的几个例子，Flutter提供了丰富的布局组件，适应各种不同的UI需求。你可以根据需要选择合适的布局组件。

如果你还有疑问，这里也为想要学习Flutter的朋友们准备了两份学习资料《Flutter Dart语言编程入门到精通》《Flutter实战》，从编程语言到项目实战，一条龙服务！！（末尾有获取方式）

《Flutter Dart 语言编程入门到精通》

• 第一章 Dart语言基础

• 第二章 Dart 异步编程
  

• 第三章 异步之 Stream 详解

• 第四章 Dart标准输入输出流
  

• 第五章 Dart 网络编程

• 第六章 Flutter 爬虫与服务端
  

• 第七章 Dart 的服务端开发

• 第八章 Dart 调用C语言混合编程

• 第九章 LuaDardo中Dart与Lua的相互调用
  

《Flutter实战：第二版》

• 第一章：起步
• 第二章：第一个Flutter应用
• 第三章：基础组件
• 第四章：布局类组件
• 第五章：容器类组件

• 第六章：可滚动组件

• 第七章：功能型组件

• 第八章：事件处理与通知

• 第九章：动画

• 第十章：自定义组件

  

• 第十一章：文件操作与网络请求

• 第十二章：Flutter扩展

• 第十三章：国际化

• 第十四章：Flutter核心原理

• 第十五章：一个完整的Flutter应用

有需要学习资料的朋友扫描下方二维码即可免费领取！！！