当前位置: 首页>移动开发>正文

flutter 使用easy_refresh没有数据时 flutter expanded

flutter配置的全局命令。创建项目 flutter create demoApp  启动项目 flutter run

1,row组件,它可以让Row里边的子元素进行水平排列,可以分为灵活排列和非灵活排列两种,可搭配一起使用,让谁灵活的就设置expands ,不灵活的就不写,

不灵活就是根据Row子元素的大小,进行布局。如果子元素不足,它会留有空隙,如果子元素超出,它会警告。

灵活解决上面有空隙的问题,可以使用 Expanded来进行解决,也就是我们说的灵活布局

Expanded有了深刻的理解,它就是灵活布局。比如我们想让中间区域变大就用expanded组件包裹,而头部区域和底部根据文字所占空间进行显示。

import 'package:flutter/material.dart';
void main () => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
      return MaterialApp(
        title:'ListView widget',

        home:Scaffold(
          appBar:new AppBar(
            title:new Text('水平方向布局'),
          ),
          body:new Row(
            children: <Widget>[
/new RaisedButton(//不平均占满整个盒子,从左到右依次紧贴如果不足后面留空隙
                onPressed: (){

                },
                color:Colors.redAccent,
                child:new Text('红色按钮')
              ),/
Expanded(child:new RaisedButton(平均占满整个盒子
                onPressed: (){         
                },
                color:Colors.redAccent,
                child:new Text('红色按钮')
              )),
              Expanded(child:new RaisedButton(
                onPressed: (){
                  },
                  color:Colors.orangeAccent,
                  child: new Text('黄色按钮'),
                )

              ),
              Expanded(child:new RaisedButton(
                onPressed: (){
                },
                color:Colors.pinkAccent,
                child:new Text('粉色按钮')
              )             
              )
            ],
          )
        ),
      );
  }
}

 2,Column组件即垂直布局控件,能够将子组件垂直排列。

左对齐只要在column组件下加入下面的代码,就可以让文字左对齐。

crossAxisAlignment: CrossAxisAlignment.start,
  • CrossAxisAlignment.star:居左对齐。
  • CrossAxisAlignment.end:居右对齐。
  • CrossAxisAlignment.center:居中对齐。
  • 在设置对齐方式的时候你会发现右mainAxisAlignment属性,意思就是主轴对齐方式,那什么是主轴,什么又是幅轴那。正常情况子元素不设置从左到右,或者从上到下依次排列。
  • main轴:如果你用column组件,那垂直就是主轴
在column组件使用MainAxisAlignment属性定义

居中属性,如果副轴居中可以把colunm组件放在center组件的child属性上,在外面套个center组件的壳,如果你用Row组件,那水平就是主轴。

  • cross轴:cross轴我们称为幅轴,是和主轴垂直的方向。比如Row组件,那垂直就是幅轴,Column组件的幅轴就是水平方向的。

3,层叠布局stack:  column和row组件有时候不适用,比如图片上面在放文字就要用到层叠布局Stack。

  

import 'package:flutter/material.dart';
void main () => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
      var stack = new Stack(
        alignment: const FractionalOffset(0.5, 0.8),//建议在两个内容进行层叠时使用。它有两个值X轴距离和Y轴距离,值是从0到1的,都是从上层容器的左上角开始算起的
        children: <Widget>[
          new CircleAvatar(//环形组件,以及相关属性
            backgroundImage: new NetworkImage('http://jspang.com/static//myimg/blogtouxiang.jpg'),
            radius: 100.0,
          ),
          new Container(//盒子组件层叠在环形组件上面
            decoration: new BoxDecoration(//背景颜色等样式
              color: Colors.lightBlue,
            ),
            padding: EdgeInsets.all(5.0),
            child: new Text('JSPang 技术胖'),//很多组件如果还有子组件都有child属性,在child属性new一个新的子组件
          )
new Positioned(//类似定位属性,距离上下左右的偏移距离,适用好几个子组件层叠可以用
            top:10.0,
            left:10.0,
            child: new Text('JSPang.com'),
           ),
],
      );


      return MaterialApp(
        title:'ListView widget',

        home:Scaffold(
          appBar:new AppBar(
            title:new Text('垂直方向布局'),
          ),
          body:Center(child:stack),
        ),
      );
  }
}

  

4,卡片组件new Card(),类似收获地址的列表

利用了ListTile实现内部列表,这里需要说明的是ListTile不光可以使用在ListView组件中,然后容器组件Column,row,contaner等

其实都可以使用

var card = new Card(
         child: Column(
           children: <Widget>[
 ListTile()
]
)
      )

 


https://www.xamrdz.com/mobile/4nn1930626.html

相关文章: