Row
1, the introduction of
- The Row component is a horizontal layout component, just like the Flex layout in H5, but with the horizontal layout defined
constructors
Row({
Key key,
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
MainAxisSize mainAxisSize = MainAxisSize.max,
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
TextDirection textDirection,
VerticalDirection verticalDirection = VerticalDirection.down,
TextBaseline textBaseline,
List<Widget> children = const <Widget>[],
})
Copy the code- MainAxisAlignment: Arrangement of the main axis in horizontal alignment
- Center: spindle center
- Start: indicates the starting point of the spindle
- “End” : indicates the end of the spindle
- SpaceAround: The space in the middle of the spindle is evenly divided, with half of the space at the beginning and end
- SpaceBetween: The blank area in the middle of the spindle is evenly divided, and there is no blank area at the beginning and end
- Spaceinstituted: evenly split the space in the middle of the spindle and evenly split the space between the ends
- MainAxisSize: The value of space occupied by the main axis
- Max: Occupies the maximum space
- Min: occupies the minimum space
- CrossAxisAlignment: a arrangement in which the lateral axes are vertical because of horizontal alignment
- Baseline: Align the side axis with the baseline
- Center: the side axis is displayed in the center
- “End” : the end of the side axis is displayed
- Start: Displays the starting point of the side axis
- “Stretch” : display when the side axle is filled
- TextDirection: The arrangement of text
- Textdirection. LTR: from left to right
- Textdirection. RTL: from right to left
- VerticalDirection: Arrangement of child controls
- Down: Layout from the upper left corner to the lower right corner
- Up: Layout from the lower right corner to the upper left corner
- TextBaseline: the baseline of text
- Children: collection of child controls
Example 3,
Three containers are discharged horizontally
Widget _buildColumn() {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
textDirection: TextDirection.ltr,
textBaseline: TextBaseline.alphabetic,
mainAxisSize: MainAxisSize.max,
verticalDirection: VerticalDirection.down,
children: <Widget>[
Container(
height: 50,
width: 50,
color: Colors.blueAccent,
),
Container(
height: 50,
width: 50,
color: Colors.redAccent,
),
Container(
height: 50,
width: 50,
color: Colors.greenAccent,
)
],
);
}
Copy the code
Column
1, the introduction of
- The Column component is a vertical layout component, just like the Flex layout for h5, but with the vertical layout defined
constructors
Column({
Key key,
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
MainAxisSize mainAxisSize = MainAxisSize.max,
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
TextDirection textDirection,
VerticalDirection verticalDirection = VerticalDirection.down,
TextBaseline textBaseline,
List<Widget> children = const <Widget>[],
})
Copy the code- MainAxisAlignment: Vertical alignment of the main axis. The main axis is in vertical alignment
- Center: spindle center
- Start: indicates the starting point of the spindle
- “End” : indicates the end of the spindle
- SpaceAround: The space in the middle of the spindle is evenly divided, with half of the space at the beginning and end
- SpaceBetween: The blank area in the middle of the spindle is evenly divided, and there is no blank area at the beginning and end
- Spaceinstituted: evenly split the space in the middle of the spindle and evenly split the space between the ends
- MainAxisSize: The value of space occupied by the main axis
- Max: Occupies the maximum space
- Min: occupies the minimum space
- CrossAxisAlignment: a arrangement in which the lateral axes are horizontal in vertical alignment
- Baseline: Align the side axis with the baseline
- Center: the side axis is displayed in the center
- “End” : the end of the side axis is displayed
- Start: Displays the starting point of the side axis
- “Stretch” : display when the side axle is filled
- TextDirection: The arrangement of text
- Textdirection. LTR: from left to right
- Textdirection. RTL: from right to left
- VerticalDirection: Arrangement of child controls
- Down: Layout from the upper left corner to the lower right corner
- Up: Layout from the lower right corner to the upper left corner
- TextBaseline: the baseline of text
- Children: collection of child controls
Example 3,
The three containers are discharged vertically, but the position is inverted due to the arrangement of up
Widget _buildColumn() {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
verticalDirection: VerticalDirection.up,
textBaseline: TextBaseline.alphabetic,
textDirection: TextDirection.ltr,
children: <Widget>[Container(
height: 50,
width: 50,
color: Colors.blueAccent,
),
Container(
height: 50,
width: 50,
color: Colors.redAccent,
),
Container(
height: 50,
width: 50,
color: Colors.greenAccent,
)],
);
}
Copy the code
Stack
1, the introduction of
- A Stack is a layout of components that can be stacked on top of each other, similar to a Stack
- The Stack component determines the position of child controls by alignment
constructors
Stack({
Key key,
this.alignment = AlignmentDirectional.topStart,
this.textDirection,
this.fit = StackFit.loose,
this.overflow = Overflow.clip,
List<Widget> children = const <Widget>[],
})
Copy the code- Alignment: Controls the alignment of the child
- TextDirection: The arrangement of text
- Textdirection. LTR: from left to right
- Textdirection. RTL: from right to left
- Fit: Defines the size of a collection of child controls
- Stackfit.loose: The size of the child control is unlimited
- Stackfit.expand: The child control is as large as possible
- Stackfit. passthrough: Does not change constraints on child controls
- Overflow: Processing beyond the layout itself
- Overflow.clip: The layout beyond is clipped
- Overflow.visible: The Overflow layout is displayed
- Children: collection of child controls
Example 3,
Place the two containers on top of each other and align them in the lower right corner
Widget _buildColumn() {
return Stack(
textDirection: TextDirection.ltr,
alignment: Alignment.bottomRight,
overflow: Overflow.visible,
fit: StackFit.loose,
children: <Widget>[
Container(
width: 100,
height: 100,
color: Colors.greenAccent,
),
Container(
height: 50,
width: 50,
color: Colors.redAccent,
)
],
);
}
Copy the code
IndexedStack
1, the introduction of
- The IndexedStack control essentially inherits the Stack component, with the distinction of adding a hierarchy of control over the display of the hierarchy through index
constructors
IndexedStack({
Key key,
AlignmentGeometry alignment = AlignmentDirectional.topStart,
TextDirection textDirection,
StackFit sizing = StackFit.loose,
this.index = 0.List<Widget> children = const <Widget>[],
})
Copy the code- Alignment: Controls the alignment of the child
- TextDirection: The arrangement of text
- Textdirection. LTR: from left to right
- Textdirection. RTL: from right to left
- Sizing: Defines the size of the collection of child controls
- Stackfit.loose: The size of the child control is unlimited
- Stackfit.expand: The child control is as large as possible
- Stackfit. passthrough: Does not change constraints on child controls
- Index: controls the display of the number of children, 0 for the first child
- Children: collection of child controls
Example 3,
The appearance of the second container is controlled by index, and the first container is hidden
Widget _buildColumn() {
return IndexedStack(
index: 1,
sizing: StackFit.loose,
textDirection: TextDirection.ltr,
alignment: Alignment.bottomRight,
children: <Widget>[
Container(
width: 100,
height: 100,
color: Colors.greenAccent,
),
Container(
height: 50,
width: 50,
color: Colors.redAccent,
)
],
);
}
Copy the code
Flow
1, the introduction of
- The Flow control is the equivalent of a streaming layout, where the layout is manipulated in a way that the developer can control
constructors
Flow({
Key key,
@required this.delegate,
List<Widget> children = const <Widget>[],
})
Copy the code- Delegate: Layout manager that manages layout placement
- Children: collection of child controls
Example 3,
Put a bunch of containers in the Flow layout, and they are of different sizes
Widget _buildColumn() {
return Flow(
delegate: GridFlowDelegate(margin: EdgeInsets.all(10.0)),
children: <Widget>[
Container(
width: 100,
height: 100,
color: Colors.greenAccent,
),
Container(
height: 50,
width: 50,
color: Colors.redAccent,
),
Container(
width: 100,
height: 100,
color: Colors.greenAccent,
),
Container(
height: 50,
width: 50,
color: Colors.redAccent,
),
Container(
width: 100,
height: 100,
color: Colors.greenAccent,
),
Container(
height: 50,
width: 50,
color: Colors.redAccent,
),
Container(
width: 100,
height: 100,
color: Colors.greenAccent,
),
Container(
height: 50,
width: 50,
color: Colors.redAccent,
),
Container(
width: 100,
height: 100,
color: Colors.greenAccent,
)
],
);
}
Copy the codeIn the Layout Manager, customize our layout by horizontally manipulating the highest container in a row as the height of the newline
class GridFlowDelegate extends FlowDelegate {
EdgeInsets margin = EdgeInsets.zero;
GridFlowDelegate({this.margin});
@override
void paintChildren(FlowPaintingContext context) {
var x = margin.left; // Draws the x coordinate of the child control
var y = margin.top; // Draws the y coordinate of the child control
var maxHeightIndex = 0; // The index of the maximum height child control on the same line, used for line breaks
for (int i = 0; i < context.childCount; i++) {
// The maximum width required by the current control = the width of the control itself + the left and right margins
var w = context.getChildSize(i).width + x + margin.right;
if (w < context.size.width) {
// If it does not exceed the current unallocated width, move it to the corresponding position and draw it
context.paintChild(i, transform: Matrix4.translationValues(x, y, 0.0));
// The next x coordinate
x = w + margin.left;
// Take the maximum height of the same row control at the beginning of the second control
if (i >= 1) {var currentHeight = context.getChildSize(i).height + margin.top + margin.bottom;
var lastHeight = context.getChildSize(maxHeightIndex).height + margin.top + margin.bottom;
if (currentHeight > lastHeight) {
// Retain the maximum height index valuemaxHeightIndex = i; }}}else{
// If the width exceeds the current unallocated width, the pre-normalized X coordinate is restored to the default value and the space is reallocated from the left
x = margin.left;
/ / y
y += context.getChildSize(maxHeightIndex).height + margin.top + margin.bottom;
// Find the coordinates directly shift to the corresponding position to draw
context.paintChild(i, transform: Matrix4.translationValues(x, y, 0.0));
// The next x coordinate needs to add its own width, and its own left and right marginsx += context.getChildSize(i).width + margin.left + margin.right; }}}@override
bool shouldRepaint(FlowDelegate oldDelegate) {
returnoldDelegate ! =this; }}Copy the code
Table
1, the introduction of
- Table control A Table control that controls width and position
constructors
Table({
Key key,
this.children = const <TableRow>[],
this.columnWidths,
this.defaultColumnWidth = const FlexColumnWidth(1.0),
this.textDirection,
this.border,
this.defaultVerticalAlignment = TableCellVerticalAlignment.top,
this.textBaseline,
})
Copy the code- Children: collection of child controls
- ColumnWidths: indicates the width of a table
- DefaultColumnWidth: The width of the default table
- Top of the top:
- Middle: vertical center
- At the bottom of the bottom:
- Baseline: align the text baseline
- Fill the whole unit
- TextDirection: The alignment of text
- Border: Border of the table
- DefaultVerticalAlignment: Default table position alignment
- TextBaseline: textBaseline type
- Alphabetic: Line up the horizontal line at the bottom of the character
- Ideographic: Aligns horizontal lines of ideographic characters
Example 3,
A table with text aligned at the bottom
Widget _buildColumn() {
return Table(
textDirection: TextDirection.ltr,
textBaseline: TextBaseline.alphabetic,
defaultColumnWidth: FixedColumnWidth(80.0),
defaultVerticalAlignment: TableCellVerticalAlignment.bottom,
border:
TableBorder.all(color: Colors.blueGrey, style: BorderStyle.solid),
columnWidths: {
0: FixedColumnWidth(50.0),
1: FixedColumnWidth(100.0),
2: FixedColumnWidth(100.0),
},
children: <TableRow>[
TableRow(children: [
Text("Serial number"),
Text("Name"),
Text("Performance"),
]),
TableRow(children: [
Text("1"),
Text("Zhang"),
Text("80"),
]),
TableRow(children: [
Text("2"),
Text("Bill"),
Text("88"),
]),
TableRow(children: [
Text("3"),
Text("Fifty"),
Text("92"),]]); }Copy the code
Wrap
1, the introduction of
- The Wrap control is equivalent to a streaming layout and is automatically wrapped, which is better than Flex’s custom capabilities
constructors
Wrap({
Key key,
this.direction = Axis.horizontal,
this.alignment = WrapAlignment.start,
this.spacing = 0.0.this.runAlignment = WrapAlignment.start,
this.runSpacing = 0.0.this.crossAxisAlignment = WrapCrossAlignment.start,
this.textDirection,
this.verticalDirection = VerticalDirection.down,
List<Widget> children = const <Widget>[],
})
Copy the code- Direction: indicates the direction of the spindle
- Axis. Horizontal: Horizontal
- Axis. Vertical: vertical layout
- Alignment: Alignment in the main axis direction
- Spacing: The spacing along the main axis
- RunAlignment: Indicates the alignment of a row in horizontal alignment and a column in vertical alignment
- RunSpacing: The spacing in the direction of a row or column
- CrossAxisAlignment: Alignment of the side axis
- TextDirection: Alignment of text
- VerticalDirection: Arrangement of child controls
- Down: Layout from the upper left corner to the lower right corner
- Up: Layout from the lower right corner to the upper left corner
- Children: collection of child controls
Example 3,
Create a vertical streaming layout using the Wrap control
Widget _buildColumn() {
return Wrap(
textDirection: TextDirection.ltr,
alignment: WrapAlignment.center,
verticalDirection: VerticalDirection.down,
crossAxisAlignment: WrapCrossAlignment.center,
direction: Axis.horizontal,
runAlignment: WrapAlignment.center,
runSpacing: 10.0,
spacing: 10.0,
children: <Widget>[
Chip(
label: Text("Three, three, three, three"),
),
Chip(
label: Text("Lee-four, lee-four, lee-four."),
),
Chip(
label: Text("Five of a kind. Five of a kind."),
),
Chip(
label: Text("Six, six, six, six."),
),
Chip(
label: Text("Money seven"),
),
Chip(
label: Text("Sun."),),,); }Copy the code
ListBody
1, the introduction of
- The ListBody control is used in conjunction with the ListView and is a child of the ListView
- The ListBody control is used to list the child nodes in order, along a given axis
constructors
ListBody({
Key key,
this.mainAxis = Axis.vertical,
this.reverse = false.List<Widget> children = const <Widget>[],
})
Copy the code- MainAxis: indicates the mainAxis
- Axis. Vertical: indicates the vertical direction
- Axis. Horizontal: indicates the horizontal direction
- Reverse: Indicates whether the control is reversed
- Children: collection of child controls
Example 3,
Displaying three different-colored containers will cause the side axis of the ListBody to be pulled to maximum because its parent is Flex
Widget _buildColumn() {
return Flex(
direction: Axis.vertical,
children: <Widget>[
ListBody(
mainAxis: Axis.vertical,
reverse: false,
children: <Widget>[
Container(
height: 50,
width: 50,
color: Colors.blueAccent,
),
Container(
height: 50,
width: 50,
color: Colors.redAccent,
),
Container(
height: 50,
width: 50,
color: Colors.greenAccent,
)
],
),
],
);
}
Copy the code
ListView
1, the introduction of
- The ListView control is a rich list component
constructors
ListView({
Key key,
Axis scrollDirection = Axis.vertical,
bool reverse = false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap = false,
EdgeInsetsGeometry padding,
this.itemExtent,
bool addAutomaticKeepAlives = true.bool addRepaintBoundaries = true.double cacheExtent,
List<Widget> children = const <Widget>[],
})
Copy the code- ScrollDirection: scrollDirection
- Reverse: Indicates whether the child control is reversed
- Controller: Used to control the scroll position and listen to scroll events
- Primary: Whether scrolling is supported when the content is insufficient to scroll
- Physics: Controls the user’s scrolling view interaction
- AlwaysScrollableScrollPhysics: always scrollable list
- PageScrollPhysics: Slide a list of pages, generally used for the slide effect of the PageView control, sliding to the end of a large popup
- ClampingScrollPhysics: No rebound effect when scrolling
- NeverScrollableScrollPhysics: even if the content range of list will not slide
- BouncingScrollPhysics: BouncingScrollPhysics BouncingScrollPhysics BouncingScrollPhysics BouncingScrollPhysics
- FixedExtentScrollPhysics: only scroll to children without any offset, must be used together with the use of FixedExtentScrollController scrollable object
- ShrinkWrap: Whether to set the length of the ListView based on the total length of the child widgets
- Padding: Inner margin of the parent control
- ItemExtent: Specifies the fixed height of the child control
- AddAutomaticKeepAlives: Whether to wrap child controls in the AutomaticKeepAlive control
- AddRepaintBoundaries: Whether to enclose child controls within the RepaintBoundary control. Used to avoid redrawing as the list scrolls
- CacheExtent: A height of space before and after the visible area to cache child controls can be quickly rendered when sliding
- Children: collection of child controls
Example 3,
Create three list controls with rebound capability
Widget _buildColumn() {
return ListView(
physics: BouncingScrollPhysics(),
cacheExtent: 10.0,
primary: true,
padding: EdgeInsets.all(15.0),
reverse: false,
scrollDirection: Axis.vertical,
children: <Widget>[
Container(
height: 300,
width: 300,
color: Colors.blueAccent,
),
Container(
height: 300,
width: 300,
color: Colors.redAccent,
),
Container(
height: 300,
width: 300,
color: Colors.greenAccent,
)
],
);
}
Copy the code
CustomMultiChildLayout
1, the introduction of
- The CustomMultiChildLayout control is similar to the CustomSingleChildLayout control. Unlike CustomMultiChildLayout, you can control multiple controls
- Child controls controlled by the CustomMultiChildLayout control are distinguished and placed by Id
constructors
CustomMultiChildLayout({
Key key,
@required this.delegate,
List<Widget> children = const <Widget>[],
})
Copy the code- Delegate: A proxy class that controls a collection of child controls
- Children: collection of child controls
Example 3,
First, create a proxy class for the control, including the size and position of the control, get the child control passed by ID, and place the description control under the title
class IdLayoutDelegate extends MultiChildLayoutDelegate {
IdLayoutDelegate();
@override
void performLayout(Size size) {
BoxConstraints constraints = BoxConstraints(maxWidth: size.width);
// Get the corresponding control size by id
Size titleSize = layoutChild("title", constraints);
Size descriptionSize = layoutChild("description", constraints);
// Place the id control position
positionChild("title", Offset(0.0.0.0));
positionChild("description", Offset(0.0, titleSize.height));
}
@override
bool shouldRelayout(MultiChildLayoutDelegate oldDelegate) {
returnoldDelegate ! =null; }}Copy the codeManipulate the corresponding control in the corresponding position by id
Widget _buildColumn() {
return CustomMultiChildLayout(
delegate: IdLayoutDelegate(),
children: <Widget>[
LayoutId(
id: "title",
child: Text("Hensen"),
),
LayoutId(
id: "description",
child: Text("Engineer Flutter"), a)],); }Copy the code
LayoutBuilder
1, the introduction of
- The LayoutBuilder control can control the return result of the layout by getting constraints on the parent control
constructors
const LayoutBuilder({
Key key,
LayoutWidgetBuilder builder,
})
Copy the code- Builder: The builder of the child control
Example 3,
Determine the size of the parent control, if it is large, use a large icon, if it is small, use a small icon
Widget _buildColumn() {
return LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
if (constraints.maxWidth > 200.0) {
// Large size
return FlutterLogo(size: 200);
}
// Small size
return FlutterLogo(size: 50); }); }Copy the code
The author
 Hensen_ |