flutter常用组件

最新推荐文章于 2024-07-23 23:35:56 发布
最新推荐文章于 2024-07-23 23:35:56 发布
阅读量6k 收藏 35
点赞数 6
文章标签： flutter android 前端 dart
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhiyuzhile/article/details/122502895
版权

文章目录

一、自定义组件

在Flutter 中自定义组件其实就是一个类，这个类需要继承 StatelessWidget 或 StatefulWidget

StatelessWidget： 无状态组件，状态不可变的widget
StatefulWidget： 有状态组件，持有的状态可能在widget 生命周期改变

import 'package:flutter/material.dart';
void main(){
	runApp(MyApp());
}
class MyApp extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        // TODO: implement build
        return Center(
            child: Text(
            	"我是一个文本内容",
            	textDirection: TextDirection.ltr,  // 文字方向
                // 文字样式
            	style: TextStyle(
                    fontSize: 40.0,
                    fontWeight: FontWeight.bold,
                    // color: Colors.yellow
                    color: Color.fromRGBO(255, 222, 222, 0.5)
                ),
            ),
        );
    }
}

二、MaterialApp 和 Scaffold

1、MaterialApp

MaterialApp 是一个方便的Widget，它封装了应用程序实现 Material Design 所需要的一些Widget。一般作为顶层widget 使用。

常用的属性：
home（主页）
title（标题）
color（颜色）
theme（主题）
routes（路由）
…

2、Scaffold

Scaffold 是Material Design 布局结构的基本实现。此类提供了用于显示drawer、snackbar 和底部 sheet 的API。

Scaffold 有下面几个主要属性：
appBar - 显示在界面顶部的一个AppBar。
body - 当前界面所显示的主要内容Widget。
drawer - 抽屉菜单控件。
…

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
// TODO: implement build
    return MaterialApp(
      title: "我是一个标题",
      home: Scaffold(
        appBar: AppBar(
          title: Text('IT 营'),
          elevation: 30.0, //设置标题阴影不需要的话值设置成0.0
        ),
        body: MyHome(),
      ),
      theme: ThemeData(
          // 设置主题颜色
          primarySwatch: Colors.yellow),
    );
  }
}

class MyHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
// TODO: implement build
    return Center(
      child: Text(
        "我是Dart 一个文本内容",
        textDirection: TextDirection.ltr,
        style: TextStyle(
            fontSize: 40.0, fontWeight: FontWeight.bold, color: Colors.black38
			// color: Color.fromRGBO(255, 222, 222, 0.5)
            ),
      ),
    );
    ;
  }
}

三、Container 组件、Text 组件

1、Text 组件

属性功能
textAlign文本对齐方式（center 居中，left 左对齐，right 右对齐，justfy 两端对齐）
textDirection文本方向（ltr 从左至右，rtl 从右至左）
overflow文字超出屏幕之后的处理方式（clip 裁剪，fade 渐隐，ellipsis 省略号）
textScaleFactor字体显示倍率
maxLines文字显示最大行数
style字体的样式设置

TextStyle 常用参数：

属性功能
decoration文字装饰线（none 没有线，lineThrough 删除线，overline 上划线，underline 下划线）
decorationColor文字装饰线颜色
decorationStyle文字装饰线风格（[dashed,dotted] 虚线，double 两根线，solid 一根实线，wavy 波浪线）
wordSpacing单词间隙（如果是负值，会让单词变得更紧凑）
letterSpacing字母间隙（如果是负值，会让字母变得更紧凑）
fontStyle文字样式（italic 斜体，normal 正常体）
fontSize文字大小
color文字颜色
fontWeight字体粗细（bold 粗体，normal 正常体）

2、Container 组件

属性功能
alignmenttopCenter：顶部居中对齐
topLeft：顶部左对齐
topRight：顶部右对齐
center：水平垂直居中对齐
centerLeft：垂直居中水平居左对齐
centerRight：垂直居中水平居右对齐
bottomCenter 底部居中对齐
bottomLeft：底部居左对齐
bottomRight：底部居右对齐
marginmargin 属性是表示Container 与外部其他组件的距离。
margin: EdgeInsets.all(20.0)
paddingpadding 就是Container 的内边距， 指Container 边缘与Child 之间的距离
padding: EdgeInsets.all(10.0)
transform让Container 进行一些旋转之类的
transform: Matrix4.rotationZ(0.2)
height容器高度
width容器宽度
child容器子元素
decoration组件样式
decoration: BoxDecoration(
  color: Colors.blue,
  // 边框样式
  border: Border.all(
    color: Colors.red,
    width: 2.0,
  ),
  // 边框圆角
  borderRadius:
    BorderRadius.all(
      Radius.circular(8.0)
    )
)

四、图片组件

1、Image 组件

图片组件是显示图像的组件，Image 组件有很多构造函数，这里例举两个：
Image.asset， 本地图片
Image.network 远程图片

Image 组件的常用属性:

属性名类型说明
alignmentAlignment图片的对齐方式
color 和
colorBlendMode		设置图片的背景颜色，通常和colorBlendMode 配合一起使用，这样可以使图片颜色和背景色混合。
fitBoxFitfit 属性用来控制图片的拉伸和挤压，这都是根据父容器来的。
BoxFit.fill: 全图显示，图片会被拉伸，并充满父容器。
BoxFit.contain: 全图显示，显示原比例，可能会有空隙。
BoxFit.cover：显示可能拉伸，可能裁切，充满（图片要充满整个容器，还不变形）。
BoxFit.fitWidth：宽度充满（横向充满），显示可能拉伸，可能裁切。
BoxFit.fitHeight ：高度充满（竖向充满）,显示可能拉伸，可能裁切。
BoxFit.scaleDown：效果和contain 差不多，但是此属性不允许显示超过源图片大小，可小不可大。
repeatImageRepeatImageRepeat.repeat : 横向和纵向都进行重复，直到铺满整个画布。
ImageRepeat.repeatX: 横向重复，纵向不重复。
ImageRepeat.repeatY：纵向重复，横向不重复。
width宽度 一般结合ClipOval 才能看到效果
height高度 一般结合ClipOval 才能看到效果
return Center(
  child: Container(
    child: Image.network(
        "http://pic.baike.soso.com/p/20130828/20130828161137-1346445960.jpg",
        alignment: Alignment.topLeft,
        color: Colors.red,
        colorBlendMode: BlendMode.colorDodge,
        // repeat: ImageRepeat.repeatX,
        fit: BoxFit.cover,
      ),
    width: 300.0,
    height: 400.0,
    decoration: BoxDecoration(
      color: Colors.yellow
    ),
  ),
);

2、引入本地图片

图片组件

然后，打开 pubspec.yaml 声明一下添加的图片文件

图片组件2

代码中使用

child: Container(
  child: Image.asset("images/a.jpeg",
    fit:BoxFit.cover
  ),
  width: 300.0,
  height: 300.0,
  decoration: BoxDecoration(
    color: Colors.yellow
  ),
)

3、实现圆角图片

child: Container(
    width: 300.0,
    height: 300.0,
    decoration: BoxDecoration(
        color: Colors.yellow,
        borderRadius: BorderRadius.circular(20),
        image: DecorationImage(
            image: NetworkImage("http://pic.baike.soso.com/p/20130828/20130828161137-1346445960.jpg"),
            fit: BoxFit.cover
        )
    ),
),

4、实现圆形图片

Center(
    child: ClipOval(
        child: Image.network(
            "https://www.itying.com/images/201905/thumb_img/1101_thumb_G_1557845381862.jpg",
            width: 150.0,
            height: 150.0,
        ),
    )),

五、列表组件

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

列表有以下分类：
1、垂直列表
2、垂直图文列表
3、水平列表
4、动态列表
5、矩阵式列表

1、ListView 组件

属性类型说明
scrollDirectionAxisAxis.horizontal 水平列表
Axis.vertical 垂直列表
paddingEdgeInsetsGeometry内边距
resolvebool组件反向排序
childrenList列表元素
class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
// TODO: implement build
    return Center(
      child: ListView(
        children: <Widget>[
          ListTile(
            leading: Icon(Icons.phone),
            title: Text(
              "this is list",
              style: TextStyle(fontSize: 28.0),
            ),
            subtitle: Text('this is list this is list'),
          ),
          ListTile(
            title: Text("this is list"),
            subtitle: Text('this is list this is list'),
            trailing: Icon(Icons.phone),
          ),
          ListTile(
            title: Text("this is list"),
            subtitle: Text('this is list this is list'),
          )
        ],
      ),
    );
  }
}

水平列表

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
// TODO: implement build
    return Container(
        height: 200.0,
        margin: EdgeInsets.all(5),
        child: ListView(
          scrollDirection: Axis.horizontal,  // 定义水平列表
          children: <Widget>[
            Container(
              width: 180.0,
              color: Colors.lightBlue,
            ),
            Container(
              width: 180.0,
              color: Colors.amber,
              child: ListView(
                children: <Widget>[
                  Image.network(
                      'https://resources.ninghao.org/images/childhood-in-a-picture.jpg'),
                  SizedBox(height: 16.0),
                  Text(
                    '这是一个文本信息',
                    textAlign: TextAlign.center,
                    style: TextStyle(fontSize: 16.0),
                  )
                ],
              ),
            ),
            Container(
              width: 180.0,
              color: Colors.deepOrange,
            ),
            Container(
              width: 180.0,
              color: Colors.deepPurpleAccent,
            ),
          ],
        ));
  }
}

动态列表（动态循环数据）

class HomeContent extends StatelessWidget {
  List list = new List();
  HomeContent({Key key}) : super(key: key) {
    for (var i = 0; i < 20; i++) {
      list.add("这是第${i}条数据");
    }
    print(list);
  }
  @override
  Widget build(BuildContext context) {
    return ListView.builder(  // 定义动态列表
      itemCount: this.list.length,
      itemBuilder: (context, index) {
// print(context);
        return ListTile(
          leading: Icon(Icons.phone),
          title: Text("${list[index]}"),
        );
      },
    );
  }
}

2、GridView 组件

GridView 创建网格列表有多种方式，主要介绍两种：

1、可以通过GridView.count 实现网格布局
2、通过GridView.builder 实现网格布局

常用属性：

名称类型说明
scrollDirectionAxis滚动方向
paddingEdgeInsetsGeometry内边距
resolvebool组件反向排序
crossAxisSpacingdouble水平子Widget 之间间距
mainAxisSpacingdouble垂直子Widget 之间间距
crossAxisCountint一行的Widget 数量
childAspectRatiodouble子Widget 宽高比例
children[ ]子元素
gridDelegateSliverGridDelegateWithFixedCrossAxisCount（常用）
SliverGridDelegateWithMaxCrossAxisExtent		控制布局，主要用在GridView.builder 里面

GridView.count 实现网格布局：

class LayoutContent extends StatelessWidget {
  List<Widget> _getListData() {
    var tempList = listData.map((value) {
      return Container(
        child: Column(
          children: <Widget>[
            Image.network(value["imageUrl"]),
            SizedBox(height: 12),
            Text(value["title"],
                textAlign: TextAlign.center, style: TextStyle(fontSize: 20)),
          ],
        ),
        decoration: BoxDecoration(
            border: Border.all(
                color: Color.fromRGBO(230, 230, 230, 0.9), width: 1.0)),
      );
    });
// ('124124','124214')
    return tempList.toList();
  }

  @override
  Widget build(BuildContext context) {
// TODO: implement build
    return GridView.count(
      padding: EdgeInsets.all(20),
      crossAxisCount: 2,
      crossAxisSpacing: 20,
      mainAxisSpacing: 20,
// childAspectRatio:0.7,
      children: this._getListData(),
    );
  }
}

GridView.builder 实现网格布局:

class LayoutContent extends StatelessWidget {
  Widget _getListData(context, index) {
    return Container(
      child: Column(
        children: <Widget>[
          Image.network(listData[index]["imageUrl"]),
          SizedBox(height: 12),
          Text(listData[index]["title"],
              textAlign: TextAlign.center, style: TextStyle(fontSize: 20)),
        ],
      ),
      decoration: BoxDecoration(
          border: Border.all(
              color: Color.fromRGBO(230, 230, 230, 0.9), width: 1.0)),
    );
  }

  @override
  Widget build(BuildContext context) {
// TODO: implement build
    return GridView.builder(
      itemCount: listData.length,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
//横轴元素个数
          crossAxisCount: 2,
//纵轴间距
          mainAxisSpacing: 20.0,
//横轴间距
          crossAxisSpacing: 10.0,
//子组件宽高长度比例
          childAspectRatio: 1.0),
      itemBuilder: this._getListData,
    );
  }
}

六、StatefulWidget 有状态组件

  • 在 Flutter 中自定义组件其实就是一个类，这个类需要继承 StatelessWidget / StatefulWidget。
  • StatelessWidget 是无状态组件，状态不可变的 widget
  • StatefulWidget 是有状态组件，持有的状态可能在 widget 生命周期改变。
  • 通俗的讲：如果我们想改变页面中的数据的话这个时候就需要用到 StatefulWidget
class HomePage extends StatefulWidget {
  //Flutter2.2.0之后需要注意把Key改为可空类型  {Key? key} 表示Key为可空类型
  HomePage({Key? key}) : super(key: key);

  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  List list=[];
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        Column(
          children: this.list.map((value){
            return ListTile(
              title: Text(value),
            );
          }).toList()
        ),
        SizedBox(height: 20),
        //Flutter2.x以后可以使用ElevatedButton替代RaisedButton也可以继续使用RaisedButton
        ElevatedButton(
          child: Text("按钮"),
          onPressed: (){
            // 通过 setState 方法改变状态
            setState(() {
                this.list.add('新增数据1');
                this.list.add('新增数据2');
            });
          },
        )
      ],
    );
  }
}

七、BottomNavigationBar 自定义底部导航条

BottomNavigationBar 是底部导航条，可以让我们定义底部 Tab 切换，BottomNavigationBar 是 Scaffold 组件的参数。

BottomNavigationBar 常见的属性：

属性说明
itemsList 底部导航条按钮集合
iconSizeicon 大小
currentIndex默认选中第几个
onTap选中变化回调函数
fixedColor选中的颜色
typeBottomNavigationBarType.fixed
BottomNavigationBarType.shifting
Scaffold(
    appBar: AppBar(
        title: Text('Flutter Demo')
    ),
    body: this._pagesList[this._curentIndex],  // 通过改变值实现页面切换
    bottomNavigationBar: BottomNavigationBar(
        currentIndex: _curentIndex,
        onTap: _changePage,
        fixedColor: Colors.black,
        type: BottomNavigationBarType.fixed,
        items: [
            BottomNavigationBarItem(
                title:Text("首页"),
                icon:Icon(Icons.home)
            ),
            BottomNavigationBarItem(
                title:Text("分类"),
                icon:Icon(Icons.category)
            ),
            BottomNavigationBarItem(
                title:Text("设置"),
                icon:Icon(Icons.settings)
            ),
        ],
    ),
)
zhiyuzhile
关注
flutter text 左对齐_Flutter常用组件（Widget）解析-Text
weixin_39585617的博客
12-22 5034
单一格式的文本。文本组件是以字符串形式显示的单一格式，这个文本字符串可以是多行显示也可以是单独一行显示，主要取决于你的布局限制。这样式内容是可选择的，如果你省略了，则会使用文本的默认样式来显示。如果给定的style的文本继承属性是true，即默认的，则这些给定的样式会与那些默认的文本样式合并。这种合并的属性非常有用，比如，让文字粗体显示，我们可以使用默认的字体和大小。child: newText(...
Flutter常用组件-ListView 列表组件
粉丝交流群：569545109
05-12 300
一、ListView 列表组件简介 列表组件也是一个经常使用的组件。在看ListView组件之前先了解一下ListTile组件。 1、ListTile(列表瓦片)组件 ListTile通常用于填充 ListView。 /** * ListTile组件 */ class ListTileWidget extends StatelessWidget { @override Widget build(BuildContext context) { return ListTile.
flutter开发之组件大全
06-12
flutter是谷歌的移动ui框架，可以快速在ios和android上构建高质量的用户界面。本课程会全面细致的讲解flutter各个组件的用法。
Flutter（1）：常用组件
羽墨灵丘的博客
08-17 2068
flutter 常用组件整理
flutter 非常用组件整理 第一篇
最新发布
会煮咖啡的猫咪
07-23 883
Flutter 是一个功能强大的跨平台移动开发框架,其组件系统支持丰富的可定制性和灵活性。本文深入探讨了 Flutter 中一些鲜为人知但却极具潜力的组件,包括 InheritedWidget、FractionallySizedBox、FittedBox 等。通过学习这些独特的组件,Flutter 开发者可以构建更出色、更有创意的应用程序,优化用户体验,提升应用性能。希望本文对您的 Flutter 开发之路有所启发和帮助。
Flutter基础 -- Flutter常用组件
原来45的博客
06-06 2043
文本组件 Text 导入资源 图片组件 image 图标组件icon 按钮组件 路由管理v1 Navigator 样式管理 手势事件 输入框 TextField
Flutter常用组件
MagicGirl
05-14 275
import 'package:flutter/material.dart'; // 写法1： void main() => runApp(MyApp()); class MyApp extends StatelessWidget{ @override Widget build(BuildContext context){ return MaterialApp( ...
Flutter 常用基础组件
小哥丷的博客
05-26 343
Text 使用： RichText 和 TextSpan 使用： 声明： 全局使用： 个别组件使用： 使用： 这里就介绍3种
Flutter常用的布局组件
01-08
下面就将我最近半年多Flutter开发中常用的布局组件做一个小归纳。 1.常用布局组件 Row https://api.flutter.dev/flutter/widgets/Row-class.html 构造函数： Row({ Key key, MainAxisAlignment mainAxisAlignment,...
flutter开发者帮助APP包含flutter常用130组件的中文文档与demo演示
08-07
Flutter开发者帮助APP是一款专为Flutter开发者设计的辅助工具，它提供了130个常用Flutter组件的中文文档和示例演示，旨在帮助开发者更高效、更深入地理解和运用这些组件。这款APP不仅对于初学者友好，同时也对有经验...
flutter 常用组件：列表ListView
u012903898的博客
10-18 440
构造函数名称特点适用场景使用频次ListView一次性创造好全部子Widget适用于展示少量连续子Widget的场景中提供了子Widget创造方法，仅在需要展示时才创建适用于子Widget较多，且视觉效果呈现某种规律性的场景高与ListView.builder类似，并提供了自定义分割线的功能与ListView.builder场景类似中。
flutter 中的常用组件
weixin_59424057的博客
06-06 1081
flutter中的常用布局组件：1、Container（）这个组件相当于html中的也是用的最多的；2、Text（）这个组件时用来放文字的，可以通过style来控制文字的大小、粗细、颜色、字体等；3、Row（）横向布局；4、Column（）纵向布局；5、Expanded（）用控制flex布局的站位宽度；6、Scaffold（）这个组件时页面结构框架：7、ListView（）滚动列表；8、slivers（）全家桶；9、......
Flutter 常用组件-总览
hongxue8888的博客
07-09 1149
文章目录1. 重要概念2. 容器组件3. 图片组件 1. 重要概念 一切皆组件。flutter所有的元素都是由组件组成。比如一个布局元素、一个动画、一个装饰效果等。 2. 容器组件 容器组件Container包含一个子widget，自身具备alignment、padding等属性，方便布局过程中摆放child。 常用属性 属性名 类型 说明 key key Container唯...
Flutter中的基本组件
m0_59056822的博客
12-31 2887
Flutter中的基本组件
Flutter | 常用组件
345丶
02-20 1633
文本 常用的配置 class TextTest extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: Padding( padding: EdgeInsets.all(30), child: Column( children: <Widget>[ Text("he.
Flutter组件
weixin_49433620的博客
01-17 2359
Flutter Text组件 名称 功能 textAlign 文本对齐方式（ center 居中；left 左对齐；right 右对齐；justify 两端对齐 ） textdirection 文本方向（ltr 从左至右；rtl 从右至左） overflow 文字超出屏幕之后的处理方式（clip裁剪，fade渐隐，ellipsis省略号） textScaleFactory 字体显示倍率 maxLines 文字显示最大行数 style 字体的样式设置 Text
Flutter常用组件的讲解
liuzhenyu0619的专栏
12-17 317
TextWidget文本组件讲解 TextWidget的常用属性 TextAlign：文本对齐属性（TextAlign.center，TextAlign.left ，TextAlign.right ，TextAlign.start ，TextAlign.end） maxLines：文本显示的最大行数 overflow：控制文本的溢出效果 child: Text("测试文本，测试文本内容显示", textAlign: TextAlign.left, maxLines: 1, overf
Flutter布局组件详解：Center与Container
接下来是`Container`组件，这是Flutter中最常用的布局容器之一。`Container`提供了丰富的功能，如设置颜色、边框、阴影、宽度、高度、内边距等。它的显示规则比较复杂，如下所述： 1. 如果`Container`没有子Widget...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值