Introduction: Scaffold is basically Material Design layout mechanism, such is provided for displaying a drawer, snackbar and the bottom sheet and the API is generally used with MaterialApp.

Common attributes:

appbar (one on top of the interface displays the AppBar)

body (currently the main content of the Widget screen display)

Drawer (drawer menu control)

...

Fourth, the container assembly Container

Description: Container is a container component, also called a layout component (div can be understood as the front of the block-level element), responsible for the layout, painting, location and size

Common attributes:

Property name	Types of	Explanation
key	Key	Container represents a unique identifier used to find updates
height	Double	Container height of the container is provided, to support full force can double.infinity in height
width	Double	Container width of the container is provided, is set to be forced double.infinity support full width, is not provided, the layout in accordance with both the parent and child
decoration	Decoration	Background style, generally defined as BoxDecoration, inside a color attribute, set a background color; border: border style, inside Border.all () method, color may be added to set the border color
borderRadius	BorderRadius	You can set border-radius Container BorderRadius.all(Radius.circular())方法; BorderRadius.circular () method can set the border since the fillet Of course, also be provided rounded picture (ClipOval components may also be used to achieve rounded corners) There BoxDecoration use of a property of the 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	Margins, call EdgeInsets.all () method or EdgeInsets.fromLTRB (left, top, right, bottom) method to set the parameters.
padding	EdgeInsets	Padding, call EdgeInsets.all () method or EdgeInsets.fromLTRB (left, top, right, bottom) method to set the parameters.
transform	Matrix4	Displacement: calling Matrix4.translationValues (x, y, z); Rotation: Matrix4.rotationZ (-0.5) // integer is negative is counter clockwise;?? Zoom: Matrix4.diagonal3Values (x, y, z);
alignment	Alignment	Elements appear: Alignment.center centered; Alignment.topRight upper right display; ...

Fifth, the text component 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 of the basic components Detailed Widget, MaterialApp, Scaffold, Container, Text, Image, ClipOval, ListView ... continuously updated in

First, the root component Widget

Second, the top-level component MaterialApp

Third, the basic layout components Scaffold

Fourth, the container assembly Container

Fifth, the text component Text

六、图片组件Image

七、圆形裁切组件ClipOval

八、ListView组件

Guess you like