Open ShannonChenCHN opened 4 years ago
build()
function. setState()
--> mutate a State
objectbuild()
方法中声明 UI 结构build()
方法被调用RenderObject
createState()
build()
State<T extends StatefulWidget>
initState()
build()
didUpdateWidget()
dispose()
StatefulWidget
and State
are separate objects?In Flutter, these two types of objects have different life cycles.
Widgets
are temporary objects, used to construct a presentation of the application in its current state.State
objects, on the other hand, are persistent between calls tobuild()
, allowing them to remember information.In Flutter, change notifications flow “up” the widget hierarchy by way of callbacks, while current state flows “down” to the stateless widgets that do presentation. The common parent that redirects this flow is the
State
.
Many widgets use a GestureDetector
to provide optional callbacks for other widgets.
Key
, GlobalKey
A Key
is an identifier for Widgets
, Elements
and SemanticsNodes
.
A new widget will only be used to update an existing element if its key is the same as the key of the current widget associated with the element.
A `GlobalKey is a key that is unique across the entire app.
Tip: To minimize the visual confusion that can result from heavily nested layout code, implement pieces of the UI in variables and functions.
child
property if they take a single child—for example, Center
or Container
children
property if they take a list of widgets—for example, Row
, Column
, ListView
, or Stack
.Row
and Column
are two of the most commonly used layout patterns.Row
and Column
each take a list of child widgets.Row
, Column
, or other complex widget.Row
or Column
aligns its children, both vertically and horizontally.Row
’s or Column
’s available space.mainAxisAlignment
and crossAxisAlignment
propertiesflex
propertyExpanded
widget Flexible
widgetSizedBox
widgetSpacer
widgetmainAxisSize
propertyMainAxisSize.min
MainAxisSize.max
Any app can use the widgets library but only Material apps can use the Material Components library.
Golden Rule: Constraints go down. Sizes go up. Parent sets position.
Limitations
Box constraints
Center
and ListView
.Transform
and Opacity
.Image
and Text
.Row
and Column
)Tight vs. loose constraints
Learning the layout rules for specific widgets
LayoutBuilder
classMediaQuery.of()
method in your build functionsAspectRatio
CustomSingleChildLayout
CustomMultiChildLayout
FittedBox
FractionallySizedBox
MediaQuery
MediaQueryData
OrientationBuilder
Flutter is declarative. This means that Flutter builds its user interface to reflect the current state of your app:
Benefit: Remarkably, there is only one code path for any state of the UI. You describe what the UI should look like for any given state, once—and that is it.(所见即所得)
When asked about React’s setState versus Redux’s store, the author of Redux, Dan Abramov, replied:
“The rule of thumb is: Do whatever is less awkward.”
初识 Flutter