一、根组件Widget

二、顶层组件MaterialApp

三、基础布局组件Scaffold

四、容器组件Container

扫描二维码关注公众号，回复： 9258873 查看本文章

一、根组件Widget

简介：Widget是所有组件的基类所有组件都继承自它

要想自定义组件必须继承下边两个类中的其中一个：

1️⃣ StatelessWidget：无状态组件，状态不可变。

2️⃣ StatefulWidget：有状态组件，持有的状态可能在widget生命周期改变。

二、顶层组件MaterialApp

简介：MaterialApp是一个方便的widget，它封装了应用程序实现Material Design所需要的一个Widget。

一般作为顶层的Widget用

常用属性：

home（主页）

title（标题）

color（颜色）

theme（主题）

routes（路由）

...

三、基础布局组件Scaffold

简介：Scaffold是Material Design布局机构的基本实现，此类提供了用于显示drawer、snackbar和底部sheet的API 一般和MaterialApp一起使用。

常用属性：

appBar（显示在界面顶部的一个AppBar）

body（当前界面所显示的主要内容 Widget）

Drawer（抽屉菜单控件）

...

四、容器组件Container

简介：Container是一个容器组件也叫布局组件(可以理解为前端的div，块级元素)，负责布局、绘画、定位和大小

常用属性：

属性名	类型	说明
key	Key	Container唯一表示符，用于查找更新
height	Double	设置Container容器的高度，设置为double.infinity可以强制在高度上撑满
width	Double	设置Container容器的宽度，设置为double.infinity可以强制在宽度上撑满，不设置，则根据child和父节点两者一起布局
decoration	Decoration	背景样式，一般可定义为BoxDecoration，里边有color属性，设置背景颜色；border:边框样式，里边有Border.all()方法，可以添加color设置边框颜色
borderRadius	BorderRadius	可以设置Container边框圆角 BorderRadius.all(Radius.circular())方法; BorderRadius.circular()方法都可以来设置边框圆角当然也可以设置圆角的图片（也可以使用ClipOval组件来实现圆角） BoxDecoration中有一个image的属性使用方法： @override Widget build(BuildContext context) { return Center( child: Container( width: 500, height: 500, decoration: BoxDecoration( color: Colors.yellow, borderRadius: BorderRadius.circular(250), image:DecorationImage( image: NetworkImage(imageUrl), fit: BoxFit.cover ) ), ) ); }
margin	EdgeInsets	外边距，调用EdgeInsets.all()方法或EdgeInsets.fromLTRB(left, top, right, bottom)方法来设置参数。
padding	EdgeInsets	内边距，调用EdgeInsets.all()方法或EdgeInsets.fromLTRB(left, top, right, bottom)方法来设置参数。
transform	Matrix4	位移：调用Matrix4.translationValues(x, y, z)；旋转：Matrix4.rotationZ(-0.5)//整数是顺时针? 负数是逆时针?；缩放：Matrix4.diagonal3Values(x, y, z)；
alignment	Alignment	元素显示位置： Alignment.center居中显示； Alignment.topRight 右上显示； ...

五、文字组件Text

简介：Text是文本组件，顾名思义Text组件就是用来显示一串文字的。

常用属性：

属性名	类型	说明
textAlign	TextAlign	文本显示方式: textAlign.center 居中对齐； textAlign.right 右对齐； textAlign.left 左对齐； textAlign.justify 两端对齐；
overflow	TextOverFlow	一行文字溢出到多行的时候的处理方式： TextOverflow.ellipsis：省略号； TextOverflow.clip：裁剪； TextOverflow.fade 渐隐；
maxLines	int	文字最大行数限制
textScaleFactor	double	字体显示倍率
style	TextStyle	字体样式： fontSize：double 字体大小； color：Colors. 字体颜色； fontWeight：FontWeight.w800 字体加粗； fontStyle：FontStyle.italic 字体倾斜； decoration：TextDecoration.lineThrough 字体添加横线； decorationColor：Colors. 字体横线颜色； decorationStyle：TextDecorationStyle.dashed 字体横线变虚线； letterSpacing：double 字间距

六、图片组件Image

简介：Image是照片组件，顾名思义Image组件就是用来显示图形的组件。

常用属性：

属性名	类型	说明
Image.network Image.asset	从网络加载图片从本地加载图片	alignment：图片对齐方式： Alignment.center居中显示 ...
fit(常用)	BoxFit	Fit属性用来控制图片的拉伸和挤压，这都是根据父容器来的。 BoxFit.fill：全图显示，图片会被拉伸，并充满父容器； BoxFit.contain：全图显示，显示原比例，可能会有缝隙； BoxFit.cover（常用）：显示可能拉伸，可能裁切，充满（图片要充满整个容器，还不变形。）; BoxFit.fitWidth：宽度充满（横向充满），显示可能拉伸，可能裁切； BoxFit.fitHight：高度充满（竖向充满），显示可能拉伸，可能裁切； BoxFit.scaleDown：效果和contain差不多，但是此属性不允许显示超过源图片大小，可小不可大。
color colorBlendMode	Color BlendMode	用来设置图片背景颜色，通常和colorBlendMode一起使用，这样可以是图片颜色和背景色混合。
repeat	ImageRepeat	平铺照片： ImageRepeat.repeat：横向和纵向都进行重复，知道铺满整个画布 ImageRepeat.repeatX：X轴平铺 ImageRepeat.repeatY：Y轴平铺
width	double	一般和ClipOval一起使用才能看到效果
hight	double	一般和ClipOval一起使用才能看到效果，就是下边这个组件。?

PS:Image组件引用本地图片方法：

1️⃣：在根目录创建文件夹images->2.0x&3.0x&4.0x 如图：

2️⃣：在pubspec.yaml文件引入当前图片

3️⃣：在项目中引入：ps:这里使用了插件flutter-img-sync，直接引入r.dart文件(这个文件里封装好了路径)

import 'package:flutter/material.dart';
import 'r.dart';



void main()=>runApp(MyApp());


class MyApp extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter title'),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Center(
      child: Container(
        width: 300,
        height: 300,
        decoration: BoxDecoration(
          color: Colors.yellow,
          image: DecorationImage(image: AssetImage(R.assetsImg1),fit: BoxFit.cover),
          borderRadius: BorderRadius.circular(150)
        ),
      ),
    );
  }
}

r.dart文件：

class R {
  /// ![](http://127.0.0.1:9813/assets/img/1.gif)
  static final String assetsImg1 = 'assets/img/1.gif';
}

七、圆形裁切组件ClipOval

简介：ClipOval是对一个图片进行圆形裁切，是单独的一个组件。

使用方法：

import 'package:flutter/material.dart';



void main()=>runApp(MyApp());


class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter title'),
        ),
        body: ClipOvalContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  //var imageUrl = 'https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_jpg/Pn4Sm0RsAujRyMUicjmNR904HzriaGfMm8SCx6HElpRJFcQYH6ruzlnFnft8qNePzXxp3kbowN5NWpialTfibHWIow/640?wx_fmt=jpeg';
  final imageUrl = 'https://tvax4.sinaimg.cn/large/006Xzox4ly1g18bru6qhbg309u09kgnb.gif';

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 500,
        height: 500,
        decoration: BoxDecoration(
          color: Colors.yellow,
            borderRadius: BorderRadius.circular(250),
            image:DecorationImage(
                image: NetworkImage(imageUrl),
                fit: BoxFit.cover
            )
        ),
      )
    );
  }
}

//圆形裁切
class ClipOvalContent extends StatelessWidget {
  final imageUrl = 'https://tvax4.sinaimg.cn/large/006Xzox4ly1g18bru6qhbg309u09kgnb.gif';
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: ClipOval(
          child: Image.network(
            imageUrl,
            height: 300,
            width: 300,
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }
}

八、ListView组件

简介：列表布局使我们项目开发中最常见的一种布局方式，Flutter中我们通过ListView来定义列表项，支持垂直和水平方向展示。通过一个属性就可以控制列表的显示方向。列表有以下几类：

1、垂直列表
2、垂直图文列表
3、水平列表
4、动态列表
5、矩阵式列表

1️⃣：ListView常用参数：

属性名	类型	说明
scrollDirection	Axis	Axis.horizontal水平列表 Axis.vertical垂直列表 (默认垂直列表)
padding	EdgeInsetsGeometry	内边距
resolve	bool	组件反向顺序
children	List<Widget>	列表元素

2️⃣：ListTile常用参数：

简介：ListTile通常用于在Flutter中填充ListView。一般实例化一个ListView都会在children中实现多个ListTile

例如：

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        ListTile(
          title: Text('小标题'),
          subtitle: Text('二级小标题'),
          leading: Image.network(
            'https://tvax4.sinaimg.cn/large/006Xzox4ly1g18bru6qhbg309u09kgnb.gif',
            fit: BoxFit.cover,
          ),
          trailing: Icon(Icons.keyboard_arrow_right),
          dense: true,
          contentPadding: EdgeInsets.all(0),
          selected: true,
          //点击事件 onTap 为单击，onLongPress 为长按
          onTap: (){
            print('123');
          },
          onLongPress: (){
            print('456');
          },
        ),
        ListTile(
          title: Text('标题'),
          subtitle: Text('二级标题'),
          leading: Image.network(
            'https://tvax4.sinaimg.cn/large/006Xzox4ly1g18bru6qhbg309u09kgnb.gif',
            fit: BoxFit.cover,
          ),
          onTap: (){
            print('131313');
          },
          trailing: Icon(Icons.keyboard_arrow_up),
        ),
        ListTile(
          title: Text('标题'),
          subtitle: Text('二级标题禁用'),
          leading: Image.network(
            'https://tvax4.sinaimg.cn/large/006Xzox4ly1g18bru6qhbg309u09kgnb.gif',
            fit: BoxFit.cover,
          ),
          trailing: Icon(Icons.keyboard_arrow_up),
          onTap: (){
            print('123');
          },
          enabled: false,
        ),
      ],
    );
  }
}

效果：

属性名	类型	说明
title	Widget	title：标题，可接受任何组件参数，一般为文本小部件
subtitle	Widget	subtitle：副标题，功能同上
dense	bool	可以使文字变的更小，可参考图上第一个和第二个列表的区别
leading	Widget	在列表的开头添加一个组件。这通常是一个图标或者是图像。如上图
trailing	Widget	在列表的末尾添加一个组件。如上。一般可以放一个箭头来做点击事件等等~ 如上图也可以使用flutter内置的Icon组件
contentPadding	EdgeInsets	设置内容内边距，默认是16。
selected	bool	在item中设置为true的时候，那么文本颜色将设置为app主体的主颜色
onTap(){};	GestureTap	点击事件，onTap为单击item要触发的事件
onLongPress(){};	GestureLongPress	点击事件，onTap为长摁item要触发的事件
enable	bool	设置为false：禁用点击事件同时item置灰
Icon	StatelessWidget	内置图标组件：一般在leading或trailing中使用。如trailing: Icon(Icons.tag_faces) 常用属性： color:设置图标颜色； size:设置图标大小

1️⃣：垂直列表demo

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'r.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Container(
            child: Text(
              '设置',
              style: TextStyle(
                fontSize: 25.0,
                color: Colors.black,
                fontWeight: FontWeight.bold,
              ),
            ),
            padding: EdgeInsets.fromLTRB(0, 0, 320, 0),
          ),
          backgroundColor: Colors.white,
        ),
        body: SettingContent(),
      ),
      theme: ThemeData.light(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class SettingContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      scrollDirection: Axis.vertical,
      children: <Widget>[
        Image.asset(R.assetsImg2,fit: BoxFit.cover,),
        ListTile(
          title: Text(
            '王洪川',
            style: TextStyle(fontSize: 20),
          ),
          subtitle: Text('Apple ID、iClound、iTunes与App Store'),
          leading: ClipOval(
            child: Image.asset(R.assetsImg1),
          ),
          trailing: Icon(Icons.chevron_right),
        ),
        Image.asset(R.assetsImg2,fit: BoxFit.cover,),
        ListTile(
          title: Text(
            '飞行模式',
          ),
          leading: Icon(Icons.flight,color: Colors.green,),
          trailing: Icon(Icons.airplanemode_inactive),
        ),
        ListTile(
          title: Text(
            'Wi-Fi',
          ),
          leading: Icon(Icons.wifi,color: Colors.blueAccent,),
          trailing: Icon(Icons.chevron_right),
        ),
        ListTile(
          title: Text(
            '蓝牙',
          ),
          leading: Icon(Icons.bluetooth,color: Colors.blueAccent),
          trailing: Icon(Icons.chevron_right),
        ),
        ListTile(
          title: Text(
            '蜂窝移动网络',
          ),
          leading: Icon(Icons.signal_cellular_connected_no_internet_4_bar,size: 25,color: Colors.amber,),
          trailing: Icon(Icons.chevron_right),
        ),
        ListTile(
          title: Text(
            '个人热点',
          ),
          leading: Icon(Icons.wifi_tethering,color: Colors.green,),
          trailing: Icon(Icons.chevron_right),
        ),
        ListTile(
          title: Text(
            'VPN',
          ),
          leading: Icon(Icons.vpn_key,color: Colors.purple,),
          trailing: Icon(Icons.chevron_right),
        ),
        Image.asset(R.assetsImg2,fit: BoxFit.cover,),
        ListTile(
          title: Text(
            '通知',
          ),
          leading: Icon(Icons.info,color: Colors.red,),
          trailing: Icon(Icons.chevron_right),
        ),
        ListTile(
          title: Text(
            '声音与触感',
          ),
          leading: Icon(Icons.volume_up,color: Colors.red,),
          trailing: Icon(Icons.chevron_right),
        ),
        ListTile(
          title: Text(
            '勿扰模式',
          ),
          leading: Icon(Icons.airline_seat_individual_suite,color: Colors.blue,),
          trailing: Icon(Icons.chevron_right),
        ),
        ListTile(
          title: Text(
            '屏幕使用时间',
          ),
          leading: Icon(Icons.access_time,color: Colors.blue,),
          trailing: Icon(Icons.chevron_right),
        ),
        Image.asset(R.assetsImg2,fit: BoxFit.cover,),
        ListTile(
          title: Text(
            '通用',
          ),
          leading: Icon(Icons.settings_applications,color: Colors.grey,),
          trailing: Icon(Icons.chevron_right),
        ),
        ListTile(
          title: Text(
            '控制中心',
          ),
          leading: Icon(Icons.tune,color: Colors.grey,),
          trailing: Icon(Icons.chevron_right),
        ),
        ListTile(
          title: Text(
            '显示与亮度',
          ),
          leading: Icon(Icons.slideshow,color: Colors.blue,),
          trailing: Icon(Icons.chevron_right),
        ),
        ListTile(
          title: Text(
            '墙纸',
          ),
          leading: Icon(Icons.wallpaper,color: Colors.lightBlue,),
          trailing: Icon(Icons.chevron_right),
        ),
      ],
    );
  }
}

效果图：

1️⃣：水平列表demo

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'r.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Container(
            child: Text(
              '水平列表',
              style: TextStyle(
                fontSize: 25.0,
                color: Colors.black,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
          backgroundColor: Colors.white,
        ),
        body: SettingContent(),
      ),
      theme: ThemeData.light(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class SettingContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 300,
      padding: EdgeInsets.fromLTRB(0, 15, 0, 0),
      child: ListView(
        scrollDirection: Axis.horizontal,
        children: <Widget>[
          Container(
            child: Image.network(
              "http://pic.rmb.bdstatic.com/f54083119edfb83c4cfe9ce2eeebc076.jpeg",
              fit: BoxFit.cover,
            ),
            width: 600,
          ),
          Container(
            child: Image.network(
                "http://www.leawo.cn/attachment/201404/16/1433365_1397624557Bz7w.jpg",
                fit: BoxFit.cover),
            width: 600,
          ),
          Container(
            child: Image.network(
                "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567069501095&di=45d8007235a116c3bebd7000642dbefb&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fblog%2F201503%2F27%2F20150327133834_JQWKZ.jpeg",
                fit: BoxFit.cover),
            width: 600,
          ),
          Container(
            child: Image.network(
                "http://img02.tooopen.com/Downs/images/2010/7/14/sy_20100714115734724071.jpg",
                fit: BoxFit.cover),
            width: 600,
          ),
          Container(
            child: Image.network(
                "http://static01.lvye.com/portal/201604/28/093110pb7151d134r1rvet.jpg",
                fit: BoxFit.cover),
            width: 600,
          ),
        ],
      ),
    );
  }
}

效果图：

图片太大了。。转存了

https://www.chuanzigeblog.com/upload/2019/7/bbb20190829145343279.gif

请叫我川子哥

发布了66 篇原创文章 · 获赞 36 · 访问量 7万+

私信关注

Flutter之基础组件详解Widget、MaterialApp、Scaffold、Container、Text、Image、ClipOval、ListView...持续更新中

一、根组件Widget

二、顶层组件MaterialApp

三、基础布局组件Scaffold

四、容器组件Container

五、文字组件Text

六、图片组件Image

七、圆形裁切组件ClipOval

八、ListView组件

猜你喜欢