Futter basic components of the two

A, Row linear layout of the layout component (its children widgets in a horizontal array)

   Attributes:Row({

        TextDirection textDirection,   
         表示水平方向子组件的布局顺序(是从左往右还是从右往左),默认为系统当前Locale环境的文本方向        MainAxisSize mainAxisSize = MainAxisSize.max,
          表示Row在主轴(水平)方向占用的空间,默认是MainAxisSize.max,表示尽可能多的占用水平方向的空间,此时无论子widgets实际占用多少水平空间,
          Row的宽度始终等于水平方向的最大宽度;而MainAxisSize.min表示尽可能少的占用水平空间,当子组件没有占满水平剩余空间,则Row的实际宽度等于所有子组件占用的的水平空间        MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
          表示子组件在Row所占用的水平空间内对齐方式,当MaxinAxisSize定义为min时,次属性无意义;其可选属性可以参考Text控件,其start的位置参考
TextDirection的定义,可以理解为:textDirectionmainAxisAlignment的参考系。       
       VerticalDirection verticalDirection = VerticalDirection.down,
          表示Row纵轴(垂直)的对齐方向,默认是VerticalDirection.down,表示从上到下。
       CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
          表示子组件在纵轴方向的对齐方式,Row的高度等于子组件中最高的子元素高度,它的取值和MainAxisAlignment一样(包含startend、 center三个值)
       List <Widget> children = const < Widget> [],
          the subassembly array.
      })

   Supplement 1: Common attributes are: MainAxisAlignment children

   Supplementary 2: Row controls can be divided into two flexible non-aligned and flexible arrangement

  1). Ineffective horizontal layout (not flexible is based on the size of the Row child elements, layout. If the child is less than it would have a gap, if the child element is exceeded, it will warn)

       Flutter write a complete tutorial on the app

     code show as below:

    child:Row(
              children: <Widget>[
                  RaisedButton(
                      onPressed: (){},
                      color: Colors.redAccent,
                    child: Text ( 'red button'),
                  ),

                  RaisedButton(
                      onPressed: (){},
                      color: Colors.blueAccent,
                      child: Text ( 'blue button'),
                  ),

                  RaisedButton(
                      onPressed: (){},
                      color: Colors.grey,
                    child: Text ( 'gray button'),
                  ),
              ],
            ),
  
   NOTE: The row inflexible layout size according to the size of the child element, and not the size of the adaptive parent element.

  2) Flexible horizontal layout (there are gaps to solve the above problems, can be used  Expandedto solve, that is, we say flexible layout)

    Usage: Expanded (child :); row will need to be flexible layout of child controls placed under the Expanded the child, the child elements can be flexible layout.

      Example snippet:     

        Expanded(child:RaisedButton(
                      onPressed: (){},
                      color: Colors.redAccent,
           child: Text ( 'red button'),
                    ),
    Renderings:
        

Two, Row linear layout of the layout component (subassembly which may be arranged in the vertical direction)

  And parameters Rowlike different layout direction perpendicular to the longitudinal axis of the spindle opposite analogy Rowto understand, from the attribute not be repeated. Its flexible layout can also be analogies row

  Flexible layout and renderings:

        

 

 

Guess you like

Origin www.cnblogs.com/Chazz-John/p/11584789.html