Flutter component learning (ListView, GridView, Row, Column, Flex Expanded, Stack)

1.ListView

  Usage scenarios: user center, news list, etc.

  List classification: vertical list, vertical graphic list, horizontal list, dynamic list

  Common parameters:

  scrollDirection: Axis.horizontal horizontal list, Axis.vertical vertical list

  padding, children (list elements), resolve (reverse sorting of components)

 Note: Add Container directly to ListView, the default vertical list, the width is adaptive, the setting has no effect; the direction is set to the horizontal list, the height is adaptive, the setting has no effect. If you want to set the width and height, you need to wrap a layer of sizedBox outside the ListView​

  ListView.builder implements a circular list:

2. GridView grid component

  Usage scenario: product list

​ GridView​.count and GridView.​extent realize grid layout; GridView.builder realize dynamic grid layout

  Common properties:

 

3. Row horizontal layout component, Column vertical layout component​​​​

Attributes:

 

The sorting method of the main axis is relative to its own component, and the sorting method of the secondary axis is relative to the outer component​​​​

4. Flexible layout Flex Expanded

Expanded​components are generally used in Row, Column, and Flex components​

Achievement effect: take one copy on the left and two copies on the right

 

5.Stack​Cascading layout components

You can use Stack​combined with Align or Stack with Positiond to realize the positioning layout of the page

​Stack​positioned relative to the outer container, or relative to the entire screen if there is no outer container

The height and width set by Positiond are the height and width of the subcomponent, not its own

FlutterMediaQuery get screen width and height

 

 

 

Guess you like

Origin blog.csdn.net/m0_73533910/article/details/131409953