flutter Widget index

关于flutter的常用Widget如下，分为布局和显示大类:

官方文档: https://docs.flutter.dev/development/ui/layout

常见布局widget：

Row: 行布局

Column: 列布局
------Row and Column: MainAxisSize.min 设置子Widgets紧密的挨着

ListTile: instead of Row you might prefer ListTile, an easy-to-use widget with properties for leading and trailing icons, and up to 3 lines of text; Use ListTile, a specialized row widget from the Material library, for an easy way to create a row containing up to 3 lines of text and optional leading and trailing icons. ListTile is most commonly used in Card or ListView, but can be used elsewhere.

ListView: Instead of Column, you might prefer ListView, a column-like layout that automatically scrolls if its content is too long to fit the available space

ScrollView: ScrollView or ListView support the scroll wheel by default, and because almost every scrollable custom widget is built using one of these, it works with them as well.

Card: A Card, from the Material library, contains related nuggets of information and can be composed from almost any widget, but is often used with ListTile. Card has a single child, but its child can be a column, row, list, grid, or other widget that supports multiple children, 一个矩形块

GridView: Lays widgets out as a scrollable grid

Tabl: Uses a classic table layout algorithm for its children, combining multiple rows and columns.

Align: 可以安排子widget在Align中的位置

AspectRatio: Attempts to size the child to a specific aspect ratio.

Center: which centers its content horizontally and vertically.

Container: Use a Container when you want to add padding, margins, borders, or background color, to name some of its capabilities.如果没有设置宽高且没有子widget会尽可能的最大，但不超过父widget设置的widget，如果有子widget那么大小和子widget一样

CircleAvatar: 可以画一个圆

SizedBox: 设置固定宽高

Scaffold: If you want the Scaffold’s child to be exactly the same size as the Scaffold itself, you can wrap its child with SizedBox.expand.

Expanded: Widgets can be sized to fit within a row or column by using the Expanded widget; 还可以设置比兄弟Widget大多少倍, once you use Expanded, the original child’s width becomes irrelevant, and is ignored.

Flexible: The only difference if you use Flexible instead of Expanded, is that Flexible lets its child have the same or smaller width than the Flexible itself, while Expanded forces its child to have the exact same width of the Expanded. But both Expanded and Flexible ignore their children’s width when sizing themselves.

Stack: Overlaps a widget on top of another. Use Stack to arrange widgets on top of a base widget—often an image. The widgets can completely or partially overlap the base widget. A Stack’s content can’t scroll，可能内容上面的内容可以滚动（待验证）; Layers and positions multiple children relative to the edges of the Stack. Functions similarly to position-fixed in CSS.

MaterialApp: you can use a Scaffold widget; it provides a default banner, background color, and has API for adding drawers, snack bars, and bottom sheets. Then you can add the Center widget directly to the body property for the home page.

Material: 如果使用到materal相关的widget，需要有一个Material ancestor, 所以会用到这个widget，也可以用包含了Material widget的widget，比如Card; 这个widget的宽高会默认占满整个屏幕，但是我们可以用一个Container包住Material设置margin和padding来调整他的大小。

布局理论

官方文档: https://docs.flutter.dev/development/ui/layout/constraints

理论概括：Constraints go down. Sizes go up. Parent sets position

• Constraints go down: A widget gets its own constraints from its parent. A constraint is just a set of 4 doubles: a minimum and maximum width, and a minimum and maximum height. 也就是说一个子widget的最大最小宽高限制，受最近父widget限制； 父widget的最大宽高就是子widget的最大宽高，不能超过；最小宽高会强制一个不满足父widget限制最小宽高的widget的宽高变为父widget设置的最小宽高；当然并非所有的widget都有设置constraints
• Sizes go up: 也就是说的是一个子widget的最大最小宽高限制，受最近父widget限制，父widget的最大宽高就是子widget的最大宽高，最小宽高待确定 TODO
• Parent sets position: 由父widget来设置子widget在父widget中的位置

理论基础

• Unbounded constraints: In certain situations, the constraint that is given to a box is unbounded, or infinite. This means that either the maximum width or the maximum height is set to double.infinity. As a result of the layout rule mentioned above, Flutter’s layout engine has a few important limitations:
  • A widget can decide its own size only within the constraints given to it by its parent. This means a widget usually can’t have any size it wants.
  • A widget can’t know and doesn’t decide its own position in the screen, since it’s the widget’s parent who decides the position of the widget.
  • Since the parent’s size and position, in its turn, also depends on its own parent, it’s impossible to precisely define the size and position of any widget without taking into consideration the tree as a whole.
  • If a child wants a different size from its parent and the parent doesn’t have enough information to align it, then the child’s size might be ignored. Be specific when defining alignment.

constraints有关的widget

ConstrainedBox: ConstrainedBox only imposes additional constraints from those it receives from its parent.
------BoxConstraints: 可以设置constraints

UnconstrainedBox: the UnconstrainedBox lets its child Container be any size it wants. 也就是说它的子widget可以设置任意大小的宽高，当时超过他本身的constraints时，会出现overflow warning（yellow-black stripe）

OverflowBox: OverflowBox is similar to UnconstrainedBox; the difference is that it won’t display any warnings if the child doesn’t fit the space. In other word, if a sub-widget is too big to fit in the OverflowBox, but the OverflowBox simply shows as much as it can, with no warnings given.

LimitedBox: 可以设置constraints，但是只有它的parent-widget传给它的constraints是 infinite constraints

FittedBox: 可以适配它的sub-widget, 当sub-widget大于FittedBox大小时（has non-infinite width and height），会进行比例伸缩适配FittedBox的大小，如果sub-widget包含infinite的大小的宽高，则不会镜像缩放；FittedBox can only scale a widget that is bounded (has non-infinite width and height). Otherwise, it won’t render anything, and you’ll see an error in the console. won’t impose any constraints onto its children widgets.
------ children widgets: container, center, row, column, UnconstrainedBox, Scaffold
------no constraints to sub-widget widgets: 当sub-widget大小超出these widgets会出现yellow-black stripe warning or error

术语

Loose constraints: When a widget tells its child that it can be smaller than a certain size, we say the widget supplies loose constraints to its child A loose constraint, on the other hand, sets the maximum width and height, but lets the widget be as small as it wants. In other words, a loose constraint has a minimum width and height both equal to zero.

Tight constraints: When a widget tells its child that it must be of a certain size, we say the widget supplies tight constraints to its child. In other words, a tight constraint has its maximum width equal to its minimum width; and has its maximum height equal to its minimum height.

补充: 应该还有一种介于两者之间的constraints: 最大最小宽高从 non-zero to maximum

Responsive app: 自动适应一个设备切换屏幕大小，如总动旋转横屏，修改应用的显示大小
Adaptive app: 自动适应不同设备的屏幕大小

显示有关的widget:

Text: 显示文本相关

Image: Create an Image widget

Icon: Create an Icon widget

Divider: 可以设置横向或纵向的分割线

创建widget的基础知识：

StatefulWidget: 可以动态刷新视图，管理状态可是Widget在本身，也可以在父Widget，也可以混合即本身和父Widget都有管理状态
StatelessWidget: 静态视图