Flutter之基础组件详解Widget、MaterialApp、Scaffold、Container、Text、Image、ClipOval、ListView...持续更新中_flutter scaffold ,container和sidedbox区别

目录

目录

一、根组件Widget

二、顶层组件MaterialApp

三、基础布局组件Scaffold

四、容器组件Container

五、文字组件Text

六、图片组件Image

七、圆形裁切组件ClipOval

八、ListView组件

一、根组件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，块级元素)，负责布局、绘画、定位和大小

常用属性：

gradient: LinearGradient(begin: Alignment.bottomCenter,end: Alignment.topCenter,colors: [Colors.black, Colors.yellow,], )；

boxShadow: [BoxShadow(color: Color.fromRGBO(69, 91, 99, 0.1000), offset: Offset(0, 16), blurRadius: 28)],

box-shadow: 0px 8px 28px 0px rgba(60,70,74,0.3);

boxShadow: [BoxShadow(offset: Offset(0, 8), blurRadius: 28,spreadRadius: 0,color: Color.fromRGBO(60, 70, 74, 0.3),)],

五、文字组件Text

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

常用属性：

六、图片组件Image

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

常用属性：

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://img-blog.csdnimg.cn/img_convert/30536829d07d831358f3670aa0f1f08c.png';
  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常用参数：

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,
        ),
      ],
    );
  }
}

效果：

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