flutter--页面布局（Transform、Baseline、Wrap、Offstage）

flutter–页面布局（Transform、Baseline、Wrap、Offstage）

1. Transform(矩阵转换)

   作用：做矩形变换-------可以对它的child做平移、旋转、缩放等操作

   主要属性表：

   属性名	类型	说明
   transform	Matrix4	一个4*4矩阵。
   origin	Øffset	旋转点，相对于左上角顶点的偏移。默认的旋转点是左上角的顶点
   alignment	AlignmentGeometry	对齐方式
   trandformHitTests	Bool	点击区域是否也会做出相应的改变

   例子：

   main.dart

   import 'package:flutter/material.dart';
   import 'package:flutter_app/table.dart';
   import 'package:flutter_app/transform.dart';
   import 'gridView.dart';
   import 'list.dart';
   void main(){
     runApp(
       // new MaterialApp(
       //   title: "ListΩView布局示例",
       //   home: new MyApp(),
       // )
       //   new MaterialApp(
       //     title: "GridView九宫格示例",
       //     home: new MyAppGrid(),
       //   )
       //new MaterialApp(
     //   title: "Table示例",
     //   home: new MyAppTable(),
     // )
       new MaterialApp(
         title: 'Transform矩阵转换示例',
         home: new LayoutDemo(),
       )
   
     );
   }
   

   transform.dart

   import 'package:flutter/material.dart';
   class LayoutDemo extends StatelessWidget{
     @override
     Widget build(BuildContext context) {
       // TODO: implement build
       return Scaffold(
         appBar: AppBar(
           title: Text('Transform矩阵转换示例'),
         ),
         body: new Center(
           child: Container(
               color:Colors.grey,
             child:Transform(
               // 对齐方式为右上角
               alignment: Alignment.topRight,
               // 用Matrix4.rotationZ(0.3)的方式，旋转一定的角度---绕Z轴旋转
               transform: Matrix4.rotationZ(0.3),
               child: Container(
                 padding: const EdgeInsets.all(8.0),
                 color: const Color(0xFFE8581C),
                 child: const Text('Transform矩阵转换'),
               ),
             )
           ),
         ),
       );
     }
   }
   

   

   更多关于Matrix4矩形的变换可以参考链接：https://juejin.im/post/6844903709470621710

   2. Baseline(基准线布局)

      作用：将所有元素底部放在同一个水平线上。

      ​ 它会根据child的baseline来调整child的位置，是一个很基础的组件。

      ​ 如果两个字号不一样的文字，希望底部在一条水平线上，就可以使用这个组件。

      属性表：

      属性名	类型	说明
      baseline	double	这个数值是从顶部开始算起的。必须要有
      baselineType	TestBaseline	baseline类型，也是必须要有的，目前有两种类型。alphabetic对齐字符底部的水平线；ideographic对齐表意字符的水平线。

      例子：

      import 'package:flutter/material.dart';
      import 'package:flutter_app/table.dart';
      import 'package:flutter_app/transform.dart';
      import 'baseline.dart';
      import 'gridView.dart';
      import 'list.dart';
      void main(){
        runApp(
          // new MaterialApp(
          //   title: "ListΩView布局示例",
          //   home: new MyApp(),
          // )
          //   new MaterialApp(
          //     title: "GridView九宫格示例",
          //     home: new MyAppGrid(),
          //   )
          //new MaterialApp(
        //   title: "Table示例",
        //   home: new MyAppTable(),
        // )
        //   new MaterialApp(
          //   title: 'Transform矩阵转换示例',
          //   home: new LayoutDemo(),
          // )
          new MaterialApp(
            title: 'Baseline基准线布局示例',
            home: new LayoutDemoxBaseline(),
          )
      
        );
      }
      

      LayoutDemoxBaseline.dart

      import 'package:flutter/material.dart';
      class LayoutDemoxBaseline extends StatelessWidget{
        @override
        Widget build(BuildContext context) {
          // TODO: implement build
          return Scaffold(
            appBar: AppBar(
              title: Text('Baseline 基准线布局示例'),
            ),
            body: Row(
              //水平等间距排列子组件
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                //设置基准线
                new Baseline(
                    baseline: 80.0,
                    baselineType: TextBaseline.alphabetic,
                  child: Text(
                    'AaBbCc',
                    style: TextStyle(
                      fontSize: 18.0,
                      // 这里也要写上对应的基准类型
                      textBaseline:TextBaseline.alphabetic,
                    ),
                  ),
                ),
                new Baseline(
                    baseline: 80.0,
                    baselineType: TextBaseline.alphabetic,
                  child: Container(
                    width: 40.0,
                    height: 40.0,
                    color: Colors.green,
                  ),
                ),
                new Baseline(
                    baseline: 80.0,
                    baselineType: TextBaseline.alphabetic,
                  child: Text(
                    'DdEeFf',
                    style: TextStyle(
                      fontSize: 26.0,
                      // 这里也要写上对应的基准类型
                      textBaseline:TextBaseline.alphabetic,
                    ),
                  ),
                )
              ],
            ),
          );
        }
      }
      

      

   3. Wrap(按宽高自动换行布局)

      单行的wrap跟row的表现几乎一致，单列的wrap则跟column表现几乎一样

      wrap突破了单行单列的限制，当主轴上空间不足时，则向次轴上去扩展。

      适用场景：一些需要按宽高让child自动换行布局的场景

      属性表：

      属性名	类型	说明
      direction	Axis	主轴方向（默认水平方向：Axis.horizontal；垂直方向：Axis.vertical）
      alignment	WrapAlignment	主轴方向上的对齐方式（设置起始位置），默认是start
      spacing	double	主轴方向上的间距（若direction是水平方向的，则spacing表示左右两个子widget之间的间距；若是垂直方向，则表示上下两个子widget之间的间距）【默认为0.0】
      runAlignment	WrapAlignment	与alignment一起，两者分别管理一个方向上的对齐方式（水平、垂直）. 【WrapAlignment.start:每一行（列）子Widget在纵（横）轴上的排列，全部子Widget从顶部开始展示】 【WrapAlignment.end:每一行（列）子Widget在纵（横）轴上的排列，全部子Widget从低部开始展示】 【WrapAlignment.center:每一行（列）子Widget在纵（横）轴上的排列，全部子widget在中间展示】【WrapAlignment.spaceBetween:每一行（列）子Widget在纵（横）轴上的排列，两两子widget之间间距相等，最上最下子widget挨着边展示】. 【WrapAlignment.spaceAround:每一行（列）子Widget在纵（横）轴上的排列，两两子widget之间间距相等，最上最下子widget离边的距离为两两子widget之间距离的一半】. 【WrapAlignment.spaceEvenly:每一行（列）子Widget在纵（横）轴上的排列，两两子widget之间间距相等，最上最下子widget离边的距离为两两子widget之间的距离】
      runSpacing	double	与spacing是相对的，管理另一个轴上的间距【默认为0】
      crossAxisAlignment	WrapCrossAlignment	主轴方向上的对齐方式 【 WrapCrossAlignment.start：水平排列时控制全部子widgets的上部对齐，垂直排列时控制全部子widgets的左边对齐 】 【WrapCrossAlignment.end：水平排列时控制全部子widgets的下部对齐，垂直排列时控制全部子widgets的又边对齐】 【WrapCrossAlignment.center：设置每一行的子Widgets居中对齐】
      textDirection	TextDirection	文本方向(TextDirection.ltr;TextDirection.rtl)
      verticalDirection	VerticalDirection	children的摆放顺序（VerticalDirection.down:正常显示;VerticalDirection.up：倒序）

      例子：

      main.dart

      import 'package:flutter/material.dart';
      import 'package:flutter_app/table.dart';
      import 'package:flutter_app/transform.dart';
      import 'package:flutter_app/wrap.dart';
      import 'baseline.dart';
      import 'gridView.dart';
      import 'list.dart';
      void main(){
        runApp(
          // new MaterialApp(
          //   title: "ListΩView布局示例",
          //   home: new MyApp(),
          // )
          //   new MaterialApp(
          //     title: "GridView九宫格示例",
          //     home: new MyAppGrid(),
          //   )
          //new MaterialApp(
        //   title: "Table示例",
        //   home: new MyAppTable(),
        // )
        //   new MaterialApp(
          //   title: 'Transform矩阵转换示例',
          //   home: new LayoutDemo(),
          // )
          // new MaterialApp(
          //   title: 'Baseline基准线布局示例',
          //   home: new LayoutDemoxBaseline(),
          // )
          new MaterialApp(
            title: 'Baseline基准线布局示例',
            home: new MyAppWrap(),
          )
      
        );
      }
      

      MyAppWrap.dart

      import 'package:flutter/material.dart';
      class MyAppWrap extends StatelessWidget{
        @override
        Widget build(BuildContext context) {
          // TODO: implement build
          return Scaffold(
            appBar: AppBar(
              title: Text('wrap按高宽自动换行布局示例'),
            ),
            body: Wrap(
              spacing: 8.0,//chip之间的间隙大小
              runSpacing: 4.0,//行之间的间隙大小
              children: [
                Chip(
                  //添加圆形头像
                  avatar: CircleAvatar(
                    backgroundColor: Colors.lightGreen.shade800,child: new Text('西门',style:TextStyle(fontSize:10.0))
                  ),
                  label: Text('西门吹雪'),
                ),
                Chip(
                  //添加圆形头像
                  avatar: CircleAvatar(
                      backgroundColor: Colors.lightGreen.shade700,child: new Text('司空',style:TextStyle(fontSize:10.0))
                  ),
                  label: Text('司空摘星'),
                ),
                Chip(
                  //添加圆形头像
                  avatar: CircleAvatar(
                      backgroundColor: Colors.lightGreen.shade800,child: new Text('婉清',style:TextStyle(fontSize:10.0))
                  ),
                  label: Text('木婉清'),
                ),
                Chip(
                  //添加圆形头像
                  avatar: CircleAvatar(
                      backgroundColor: Colors.lightGreen.shade900,child: new Text('一郎',style:TextStyle(fontSize:10.0))
                  ),
                  label: Text('萧十一郎'),
                ),
              ],
            ),
          );
        }
      }
      

      

      若将alignment:属性设置为WrapAlignment.end，如图：

      

      得到如下效果：

      

      若将verticalDirection属性设置为:VerticalDirection.up 如图：

      

      得到的效果如下：
      

   4. Offstage(控制是否显示组件)

      作用：控制child是否显示

      属性：offstage bool（默认值为true）------true表示不显示，false显示

      例子：

      main.dart

      import 'package:flutter/material.dart';
      import 'package:flutter_app/table.dart';
      import 'package:flutter_app/transform.dart';
      import 'package:flutter_app/wrap.dart';
      import 'baseline.dart';
      import 'gridView.dart';
      import 'list.dart';
      import 'offstage.dart';
      void main(){
        runApp(
          // new MaterialApp(
          //   title: "ListΩView布局示例",
          //   home: new MyApp(),
          // )
          //   new MaterialApp(
          //     title: "GridView九宫格示例",
          //     home: new MyAppGrid(),
          //   )
          //new MaterialApp(
        //   title: "Table示例",
        //   home: new MyAppTable(),
        // )
        //   new MaterialApp(
          //   title: 'Transform矩阵转换示例',
          //   home: new LayoutDemo(),
          // )
          // new MaterialApp(
          //   title: 'Baseline基准线布局示例',
          //   home: new LayoutDemoxBaseline(),
          // )
          // new MaterialApp(
          //   title: 'Baseline基准线布局示例',
          //   home: new MyAppWrap(),
          // )
            MyAppOffstage()
      
        );
      }
      

      MyAppOffstage.dart

      import 'package:flutter/material.dart';
      class MyAppOffstage extends StatelessWidget{
        @override
        Widget build(BuildContext context) {
          // TODO: implement build
          final appTitle = 'offstage控制时候显示组件示例';
          return MaterialApp(
            title: appTitle,
            home: new MyHomePage(title:appTitle),
          );
          return Scaffold(
            appBar: AppBar(
              title: Text('offstage控制时候显示组件示例'),
              
            ),
          );
        }
      }
      //有状态
      class MyHomePage extends StatefulWidget{
        final String title;
        MyHomePage({Key key,this.title}):super(key:key);
        @override
        _MyHomePageState createState() =>new _MyHomePageState();
        
      }
      
      class _MyHomePageState extends State<MyHomePage>{
        //状态控制是否显示文本组件
        bool offstage = true;
        @override
        Widget build(BuildContext context) {
          // TODO: implement build
          return Scaffold(
            appBar: AppBar(
              //获取到title的值
              title: new Text(widget.title),
            ),
            body: Center(
              child: Offstage(
                offstage: offstage,
                child: Text(
                  '我出来啦！',
                  style: TextStyle(
                    fontSize: 36.0,
                  ),
                ),
              ),
            ),
            floatingActionButton: FloatingActionButton(
              onPressed: (){
                //设置时候显示文本组件
                setState(() {
                  offstage=!offstage;
                });
              },
              tooltip: "显示隐藏",
              child: new Icon(Icons.flip),
            ),
          );
        }
      }
      

      按下按钮前

      

      按下按钮后：

      
      总结：这一部分就是我学习到的一些flutter页面布局的组件，这次滴分享到此结束喽！