Flutter-基础组件二

1.基本组件

1）Text 文本组件

Text('首页',style:TextStyle(
      //颜色
      color:Colors.orange,
      //字体大小
      fontSize:20,
      //字体加粗
      fontWeight: FontWeight.bold,
    ))


TextStyle 属性设置：
TextStyle({
    this.inherit = true,
    this.color,//文本样式
    this.fontSize,//字体大小
    this.fontWeight,//绘制文本时的字体粗细
    this.fontStyle,//字体变体
    this.letterSpacing,//水平字母之间的空间间隔(逻辑像素为单位),可以负值
    this.wordSpacing,//单词之间添加的空间间隔(逻辑像素为单位),可以负值
    this.textBaseline,//对齐文本的水平线
    this.height,//文本行与行的高度,作为字体代销的倍数
    this.locale,//用于选择区域定字形的语言环境
    this.foreground,//文本的前景色，不能与color共同设置
    this.background,//文本背景色
    this.shadows,//Flutter Decoration背景设定(边框，圆角，阴影,渐变等)
    this.decoration,//绘制文本装饰，添加上下划线，删除线
    this.decorationColor,//文本装饰的颜色
    this.decorationStyle,//文本装饰的样式，控制画虚线，点，波浪线
    this.debugLabel,
    String fontFamily,//使用字体的名称
    String package,
  })

2）RichText 富文本

常用属性：

  • text：需要设置TextSpan类型，而且textSpan必须设置style,不然不显示。
  • textAlign：文本开始位置。
  • textDirection：文本方向。
  • maxLines：最大行数。
  • overflow：文本超出部分显示样式。
RichText(
 text:TextSpan(
     text: '你是猪吗',
     style: TextStyle(color: Colors.black, fontSize: 18.0),
     recognizer: TapGestureRecognizer()..onTap=(){
       print('你点击了\'你是猪吗\'');
     },
     children: [
       TextSpan(text: '滚',style: TextStyle(color: Colors.orange, fontSize: 18.0)),
       TextSpan(text: '你才是',style: TextStyle(color: Colors.blue, fontSize: 18.0)),
       TextSpan(text: '猪',style: TextStyle(color: Colors.green, fontSize: 18.0))
     ]
 )
)

TextSpan 属性：

TextSpan({
    this.text, //文本
    this.children, // TextSpan数组
    TextStyle style,// 文本样式
    this.recognizer,// 设置识别手势
    this.semanticsLabel,// 文本的语义
  })

3）textfield 文本输入框

常用属性：

  • autocorrect：是否启用自动更正。
  • autofocus：是否是自动获取焦点。
  • controller：设置一个TextEditingController ，控制正在编辑的文本。
  • decoration：可以设置文本框的外观，以及hitText相当于placeHolder。
  • enabled：是否禁用。
  • focusNode：是否具有键盘焦点。
  • inputFormatters：可选的，输入验证和格式化。
  • keyboardType：用于编辑文本的键盘类型。
  • maxLength：文本最大的字符串长度。
  • maxLengthEnforced：如果为true，则防止字段超过 maxLength字符。
  • maxLines：文本最大行数，默认为 1。多行时应该设置为 > 1。
  • obscureText：是否是隐藏文本（密码形式）。
  • onChanged：当 value 改变时触发。
  • onSubmitted：当用户点击键盘的提交时触发。
  • style：文本样式，颜色，字体等。
  • textAlign：设置文本对齐方式
final editController = TextEditingController();

TextField(
    controller: editController,
    keyboardType: TextInputType.phone,
    maxLength: 30,//最大长度，设置此项会让TextField右下角有一个输入数量的统计字符串
    maxLines: 1,//最大行数
    autocorrect: true,//是否自动更正
    autofocus: true,//是否自动对焦
    //      obscureText: true,//是否是密码
    textAlign: TextAlign.left,//文本对齐方式
    style: TextStyle(fontSize: 15.0, color: Colors.blue,height: 30),//输入文本的样式
    inputFormatters: [WhitelistingTextInputFormatter.digitsOnly],//允许的输入格式
    onChanged:(value){
      print('输入内容 = $value');
    },
    onSubmitted:(value){
      print('提交的内容 = $value');
    }
),

4）Button 按钮

  • RaisedButton："漂浮"按钮，它默认带有阴影和灰色背景。
  • FlatButton：扁平按钮，默认背景透明并不带阴影。按下后，会有背景色。
  • OutlineButton：默认有一个边框，不带阴影且背景透明。按下后，边框颜色会变亮、同时出现背景和阴影(较弱)。
  • IconButton是一个可点击的Icon，不包括文字，默认没有背景，点击后会出现背景。
RaisedButton(
  child: Text("normal"),
  onPressed: () {
    print('Raise按钮被点击了');
  },
);
FlatButton(
  child: Text("normal"),
  onPressed: () {
    print('Flat按钮被点击了');
  },
)

OutlineButton(
  child: Text("normal"),
  onPressed: () {
    print('Outline按钮被点击了');
  },
)

IconButton(
  icon: Icon(Icons.thumb_up),
  onPressed: () {
    print('icon按钮被点击了'); 
  },
)

5）Image 图片

先在pubspec.yaml中配置图片路径,新建一个images文件夹与lib同级，用来存放图片资源。

flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
   - images/    // 默认1.0x图片，声明images下的所有图片但不包含子文夹下的图片
   - images/home/wish.png // 声明具体的某张图片，可以不需要配置这么具体
   - images/home/       // 声明home文件下的所有图片
   - images/2.0x/       // 声明2倍图中的所有图片
   - images/3.0x/
   - images/xianbao.png  // 声明1倍图中没有但2倍3倍图中有的图片
  • 适配2x，3x分辨率图片

在images文件夹下创建2.0x和3.0x文件夹存放2x，3x图片。flutter中会首先根据系统的devicePixelRatio，来找对应倍数的文件夹下的图片，如果没有对应倍数，找最接近的。

images/ 默认存放的是1.0x的图片，若1倍图中没有要声明的图片，想要直接自适应2倍图和3倍图，要单独进行声明，但不需要带2.0x,和3.0x,系统会自动按分辨率从低到的顺序去选择。

1.0x、2.0x、3.0x 文件名保持一致。

  • 路径配置

不需要配置完整路径，配置到图片所在文件夹即可，不然几百张图片每张图片配置一个路径不是要累死。

  • 创建方式
// 第一种方式创建Image
Image.asset('images/juren.jpeg',width: 200,height: 200,),
Image.asset('images/xianbao.png',width: 50,height: 50,),
// 加载网络图片
Image.network('http://pic1.win4000.com/pic/c/cf/cdc983699c.jpg',width: 200,height: 300,),
// 第二种方式创建Image
Image(image: AssetImage('images/home/wish.png'),width: 50,height: 50,)

属性fit:

  • BoxFit.fil：完全填充，宽高比可能会变。
  • BoxFit.contain：等比拉伸，直到一边填充满。
  • BoxFit.cover：等比拉伸，直到两边都填充满，此时一边可能超出范围。
  • BoxFit.fitWidth：等比拉伸，宽填充满。
  • BoxFit.fitHeight：等比拉伸，高填充满。
  • BoxFit.none：不拉伸，超出范围截取。
  • BoxFit.scaleDown：只缩小，等比。

6）CircleAvatar

源码：

 const CircleAvatar({
    Key key,
    this.child,
    this.backgroundColor,
    this.backgroundImage,
    this.foregroundColor,//前景色，
    this.radius,
    this.minRadius,
    this.maxRadius,
   })

示例：

//圆行图片
Align(
  child: CircleAvatar(
    backgroundImage: NetworkImage(
        "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg"),
    backgroundColor: Color(0xffff0000),
    radius: 40.0,
  ),
)


Align(
  child: ClipOval(
    child: SizedBox(
      width: 80.0,
      height: 80.0,
      child: Image.network(
        "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg",
        fit: BoxFit.fill,),
    ),
  ),
),
Align(
    child: Container(
      width: 80.0,
      height: 80.0,
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        image: DecorationImage(
          fit: BoxFit.fill,
          image: NetworkImage(
            "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg",
          ),
        ),
      ),
    )
),

注意：

  • 发现不添加Align时，CircleAvatar并没有显示为圆形，
    只有设置backgroundColor或者backgroundImage时才显示为了圆形。

  • radius和minRadius与maxRadius不能同时使用。

  • ClipOval不在Align里面时也不能显示为圆形，ClipOval中image设置为fit: BoxFit.fill才能显示为圆形。

  • BoxDecoration不在Align里面时也不能显示为圆形，BoxDecoration中image设置为fit:BoxFit.fill才能显示为圆形。

7）Icon 字体图库

Flutter 中，也可以使用iconfont。iconfont和图片相比它的优势：

  • 体积更小，可以减少安装包大小。
  • iconfont 都是矢量图标，放大不会影响其清晰度。
  • 可以应用文本样式，可以像文本一样改变字体图标的颜色、大小对齐等。
  • 可以通过 TextSpan 和文本混用。

 const Icon(
    this.icon, {   
    Key key,
    this.size,           //大小
    this.color,          //颜色
    this.semanticLabel,  //语义标签
    this.textDirection,  //icon文字方向
  }) 


final Map bottomMap ={
    "首页":Icon(Icons.home),
    "朋友圈":Icon(Icons.camera),
    "信息":Icon(Icons.message),
    "其他":Icon(Icons.devices_other),
  };

8）Checkbox 复选框

常用属性：

  • value：复选框的值bool类型。
  • activeColor：选中时的复选框的颜色。
  • onChanged：复选框的响应事件。
Checkbox(
  value: _checkValue,
  activeColor: Colors.red,
  onChanged: (value){
    setState(() {
      _checkValue = value;
    });
    print("checkBox value changed");
  },),

9）Switch 开关

常用属性：

  • activeColor：激活时开关的颜色。
  • activeThumbImage：原点支持图片设置，激活时的效果。
  • activeTrackColor：激活时横条的颜色。
  • inactiveThumbColor：非激活时原点的颜色。
  • inactiveThumbImage：非激活原点的图片效果。
  • inactiveTrackColor：非激活时横条的颜色。
  • onChanged：值改变时触发。
  • value：切换值时的响应事件。
Switch(
  value: _switchValue,
  activeColor:Colors.blue ,
  onChanged: (value){
    setState(() {
      _switchValue = value;
    });
})
2.列表组件和网格组件

1）ListView

常用的构造方式：

  • ListView()
  • ListView.builder
  • ListView.separated
  • ListView.custom

常用属性：

  • scrollDirection：滚动方向。
  • controller：滚动控制，主要是控制滚动位置和监听滚动事件。
  • reverse： 显示方式，默认正序显示。
  • primary：false时如果内容不足，则用户无法滚动，而如果为true，它们总是可以尝试滚动。相当于iOS的bounce弹性设置。
  • padding：内边距。
  • physics:滚动底部时弹簧效果设置，不同平台可以设置不同效果，也可以统一。
  • shrinkWrap：是否根据子widget的总长度来设置GridView的长度。
  • itemExtent：该参数如果不为null，则会强制children的高度为itemExtent的值，横向为宽度，纵向为高度。
  • itemBuilder：构造的item。
  • itemCount：item数量，一般根据模型数量确定，如果为null，则视为无限列表。
  • separatorBuilder：自定义分割线的回调方法。

示例:

class ListViewWidget extends StatelessWidget{

  final List listData=[
    {
      "title":"Candy Shop",
      "author":"小明",
      "imageUrl":"https://www.itying.com/images/flutter/1.png"
    },
    {
      "title":"Candy Shop",
      "author":"小明",
      "imageUrl":"https://www.itying.com/images/flutter/2.png"
    },
    {
      "title":"Candy Shop",
      "author":"小明",
      "imageUrl":"https://www.itying.com/images/flutter/3.png"
    },
    {
      "title":"Candy Shop",
      "author":"小明",
      "imageUrl":"https://www.itying.com/images/flutter/4.png"
    },{
      "title":"Candy Shop",
      "author":"小明",
      "imageUrl":"https://www.itying.com/images/flutter/5.png"
    }
  ];

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView.builder(
      itemCount: listData.length,
      itemExtent: 120,
      itemBuilder: (BuildContext context,int index){
      return Container(
        child:Row(
          children: [
            Image.network(listData[index]['imageUrl'],width: 100,height: 100,),
            Column(
             children: [
               Text(listData[index]['title']),
               Text(listData[index]['author']),
             ],
            )
          ],
        ) ,
      );
    },);
  }

}




/*

@override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView.separated(
      itemCount: listData.length,
      separatorBuilder: (BuildContext context,int index){
        return Divider(height: 1.0, color: Colors.blue);
      },
      itemBuilder: (BuildContext context,int index){
      return Container(
        child:Row(
          children: [
            Image.network(listData[index]['imageUrl'],width: 100,height: 100,),
            Column(
             children: [
               Text(listData[index]['title']),
               Text(listData[index]['author']),
             ],
            )
          ],
        ) ,
      );
    },);
  }

**/

2）GridView

常用属性：

  • scrollDirection：滚动方向horizontal（水平）或vertical（垂直）。
  • reverse：显示方式，默认正序显示。
  • controller：用来控制滚动位置及监听滚动事件。
  • gridDelegate：控制子Widget如何进行布局。
  • children：子控件。

gridDelegate 用来控制子Widget如何进行布局,它有如下两个实现类：

  • SliverGridDelegateWithMaxCrossAxisExtent
const SliverGridDelegateWithMaxCrossAxisExtent({
    @required this.maxCrossAxisExtent, //子控件的最大宽度，实际宽度是根据交叉轴的值进行平分，也就是说最大宽度并不一定是实际宽度，很有可能子控件的实际宽度要小于设置的最大宽度
    this.mainAxisSpacing = 0.0, //主轴之间的间距
    this.crossAxisSpacing = 0.0,//交叉轴之间的间距
    this.childAspectRatio = 1.0,//子控件的宽高比
  }

子控件的个数实际上就是交叉轴的最大宽度除以我们设置的最大值得出的值，如果该值为整数，那个该值就是子控件的个数，如果不是整数，那么就舍掉小数点后面的值加上一后就是子控件的个数。

  • SliverGridDelegateWithFixedCrossAxisCount
const SliverGridDelegateWithFixedCrossAxisCount({
    @required this.crossAxisCount,  //交叉轴上子控件的个数
    this.mainAxisSpacing = 0.0,
    this.crossAxisSpacing = 0.0,
    this.childAspectRatio = 1.0,
  })

示例：

class GridViewWidget extends StatelessWidget{


  @override
  Widget build(BuildContext context) {

    return GridView.builder(gridDelegate:SliverGridDelegateWithFixedCrossAxisCount(
//        maxCrossAxisExtent:100,
        crossAxisCount:3,
        mainAxisSpacing: 10,
        crossAxisSpacing: 10

    ),
      itemCount:20,
      itemBuilder:(BuildContext context, int index){
      return Container(
        color: Colors.orange,
        child: Center(
          child: Text('item $index',style: TextStyle(backgroundColor:Colors.blue,color: Colors.white),),
        ),
      );
    });
  }

}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,271评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,275评论 2赞 380
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,151评论 0赞 336
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,550评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,553评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,559评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,924评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,580评论 0赞 257
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,826评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2赞 320
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,363评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,940评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2赞 342