flutter基础组件概览

明致成

已于 2024-07-28 12:07:10 修改

阅读量124

点赞数 2

分类专栏： flutter航旅记录文章标签： flutter 前端

于 2024-07-24 17:24:15 首次发布

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/LiyangBai/article/details/140668554

版权

flutter基础组件概览

1、入口文件、入口方法

每一个flutter项目的lib目录里面都有一个main.dart，这个文件就是flutter的入口文件；

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

其中的main方法是dart的入口方法。runApp方法是flutter的入口方法。

2、demo样例

demo1：Text展示文本

import 'package:flutter/material.dart';

void main() {
   
  runApp(const Center(
    child: Text(
      "我是一个文本",
      textDirection: TextDirection.ltr,
    ),
  ));
}

demo2：TextStyle增加样式

import 'package:flutter/material.dart';

void main() {
   
  runApp(const Center(
    child: Text(
      "我是一个文本",
      textDirection: TextDirection.ltr,
      style: TextStyle(
        fontSize: 40.0,
        color: Color.fromRGBO(244, 233, 121, 0.5),
      ),
    ),
  ));
}

demo3：AppBar与body展示

import 'package:flutter/material.dart';

void main() {
   
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: const Text("你好Flutter")),
      body: const Center(
        child: Text(
          "我是一个文本",
          textDirection: TextDirection.ltr,
          style: TextStyle(
            fontSize: 40.0,
            color: Color.fromRGBO(244, 233, 121, 0.5),
          ),
        ),
      ),
    ),
  ));
}

demo4：抽离组件内容为HomeWidget

import 'package:flutter/material.dart';

void main() {
   
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: const Text("你好Flutter")),
      body: const HomeWidget(),
    ),
  ));
}

class HomeWidget extends StatelessWidget {
   
  const HomeWidget({
   super.key});

  @override
  Widget build(BuildContext context) {
   
    return const Center(
      child: Text(
        "我是一个文本",
        textDirection: TextDirection.ltr,
        style: TextStyle(
          fontSize: 40.0,
          color: Color.fromRGBO(244, 233, 121, 0.5),
        ),
      ),
    );
  }
}

3、内容单独抽离为组件

demo1：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
   
  const MyApp({
   super.key});

  @override
  Widget build(BuildContext context) {
   
    return const Center(
      child: Text(
        "我是一个文本内容",
        textDirection: TextDirection.ltr,
      ),
    );
  }
}

demo2：

import 'package:flutter/material.dart';

void main() {
   
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: const Text("你好Flutter")),
      body: const HomeWidget(),
    ),
  ));
}

class HomeWidget extends StatelessWidget {
   
  const HomeWidget({
   super.key});

  @override
  Widget build(BuildContext context) {
   
    return const Center(
      child: Text(
        "我是一个文本",
        textDirection: TextDirection.ltr,
        style: TextStyle(
          fontSize: 40.0,
          color: Color.fromRGBO(244, 233, 121, 0.5),
        ),
      ),
    );
  }
}

4、MaterialApp组件、Scaffold组件

MaterialApp

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

常用的属性：

home：主页
title：标题
color：颜色
theme：主题
routes：路由

Scaffold

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

常用的属性：

属性	类型	说明
appBar	`AppBar`	显示在界面顶部的AppBar
body		当前界面显示的主要内容Widget
floatingActionButton	`FloatingActionButton`	实现浮动按钮；实现底部凸起导航；
floatingActionButtonLocation	`FloatingActionButtonLocation`	浮动按钮的位置
bottomNavigationBar	`BottomNavigationBar`	底部导航条
drawer	`Drawer`	左侧边栏抽屉菜单
endDrawer	`Drawer`	右侧边栏抽屉菜单

FloatingActionButton组件

FloatingActionButton可以实现浮动按钮，也可以实现底部凸起导航；

属性	说明
child	子元素
tooltip	长按时显示，也是无障碍功能
backgroundColor	背景颜色
elevation	未点击时的阴影
highlightElevation	点击时阴影值，默认12.0
onPressed	点击事件回调
shape	定义按钮形状
mini	是否是mini类型，默认false

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
   
  const HomePage({
   super.key});

  @override
  Widget build(BuildContext context) {
   
    return const Text('首页');
  }
}

class CategoryPage extends StatelessWidget {
   
  const CategoryPage({
   super.key});

  @override
  Widget build(BuildContext context) {
   
    return const Text('分类');
  }
}

class MessagePage extends StatelessWidget {
   
  const MessagePage({
   super.key});

  @override
  Widget build(BuildContext context) {
   
    return const Text('消息');
  }
}

class SettingPage extends StatelessWidget {
   
  const SettingPage({
   super.key});

  @override
  Widget build(BuildContext context) {
   
    return const Text('设置');
  }
}

class UserPage extends StatelessWidget {
   
  const UserPage({
   super.key});

  @override
  Widget build(BuildContext context) {
   
    return const Text('用户');
  }
}

void main() {
   
  runApp(const MaterialApp(
    home: LayoutPage(),
  ));
}

class LayoutPage extends StatefulWidget {
   
  const LayoutPage({
   super.key});

  @override
  State<LayoutPage> createState() => _LayoutPageState();
}

class _LayoutPageState extends State<LayoutPage> {
   
  late int _currentIndex = 0;
  final List<Widget> _pages = const [
    HomePage(),
    CategoryPage(),
    MessagePage(),
    SettingPage(),
    UserPage()
  ];

  @override
  Widget build(BuildContext context) {
   
    return Scaffold(
      appBar: AppBar(
        title: const Text("hello flutter"),
        backgroundColor: Colors.blue,
      ),
      body: _pages[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (value) {
   
          setState(() {
   
            _currentIndex = value;
          });
        },
        fixedColor: Colors.blue,
        iconSize: 24,
        type: BottomNavigationBarType.fixed,
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
          BottomNavigationBarItem(icon: Icon(Icons.category), label: '分类'),
          BottomNavigationBarItem(icon: Icon(Icons.message), label: '消息'),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: '设置'),
          BottomNavigationBarItem(icon: Icon(Icons.people), label: '用户'),
        ],
      ),
      floatingActionButton: Container(
        height: 60,
        width: 60,
        padding: const EdgeInsets.all(4),
        margin: const EdgeInsets.only(top: 4),
        decoration: BoxDecoration(
            color: Colors.white, borderRadius: BorderRadius.circular(30)),
        child: FloatingActionButton(
          backgroundColor: _currentIndex == 2 ? Colors.red : Colors.blue,
          onPressed: () {
   
            setState(() {
   
              _currentIndex = 2;
            });
          },
          child: const Icon(Icons.add),
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
  }
}

BottomNavigationBar组件

BottomNavigationBar是底部导航条，可以让我们定义底部Tab切换；

属性	类型	说明
items	List	底部导航条按钮集合
iconSize	int	图标大小
currentIndex	int	默认选中第几个
onTap	Function(int)	选中回调函数
fixedColor	Color	选中的颜色
type	`BottomNavigationBarType`	底部有4个及以上菜单时需要配置

import 'package:flutter/material.dart';

void main() {
   
  runApp(const MaterialApp(
    home: HomePage(),
  ));
}

class HomePage extends StatefulWidget {
   
  const HomePage({
   super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
   
  late int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
   
    return Scaffold(
      appBar: AppBar(
        title: const Text("hello flutter"),
        backgroundColor: Colors.blue,
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (value) {
   
          setState(() {
   
            _currentIndex = value;
          });
        },
        fixedColor: Colors.blue,
        iconSize: 24,
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: '首页',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.category),
            label: '分类',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: '设置',
          )
        ],
      ),
    );
  }
}

Drawer组件

在Scaffold组件里面传入drawer参数可以定义左侧边栏，传入endDrawer可以定义右侧边栏。
侧边栏默认是隐藏的，我们可以通过手指滑动显示侧边栏，也可以通过点击按钮显示侧边栏。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

DrawerHeader组件

属性	描述
decoration	顶部背景颜色
child	子元素
padding	内边距
margin	外边距

UserAccountsDrawerHeader组件

属性	描述
decoration	顶部背景颜色
accountName	账户名称
accountEmail	账户邮箱
currentAccountPicture	用户头像
otherAccountsPictures
margin	外边距

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
   
  const HomePage({
   super.key});

  @override
  Widget build(BuildContext context) {
   
    return const Text('首页');
  }
}

class CategoryPage extends StatelessWidget {
   
  const CategoryPage({
   super.key});

  @override
  Widget build(BuildContext context) {
   
    return const Text('分类');
  }
}

class MessagePage extends StatelessWidget {
   
  const MessagePage({
   super.key});

  @override
  Widget build(BuildContext context) {
   
    return const Text('消息');
  }
}

class SettingPage extends StatelessWidget {
   
  const SettingPage({
   super.key});

  @override
  Widget build(BuildContext context) {
   
    return const Text('设置');
  }
}

class UserPage extends StatelessWidget {
   
  const UserPage({
   super.key});

  @override
  Widget build(BuildContext context) {
   
    return const Text('用户');
  }
}

void main() {
   
  runApp(const MaterialApp(
    home: LayoutPage(),
  ));
}

class LayoutPage extends StatefulWidget {
   
  const LayoutPage({
   super.key});

  @override
  State<LayoutPage> createState() => _LayoutPageState();
}

class _LayoutPageState extends State<LayoutPage> {
   
  late int _currentIndex = 0;
  final List<Widget> _pages = const [
    HomePage(),
    CategoryPage(),
    MessagePage(),
    SettingPage(),
    UserPage()
  ];

  @override
  Widget build(BuildContext context) {
   
    return Scaffold(
      appBar: AppBar(
        title: const Text("hello flutter"),
        backgroundColor: Colors.blue,
      ),
      body: _pages[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (value) {
   
          setState(() {
   
            _currentIndex = value;
          });
        },
        fixedColor: Colors.blue,
        iconSize: 24,
        type: BottomNavigationBarType.fixed,
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
          BottomNavigationBarItem(icon: Icon(Icons.category), label: '分类'),
          BottomNavigationBarItem(icon: Icon(Icons.message), label: '消息'),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: '设置'),
          BottomNavigationBarItem(icon: Icon(Icons.people), label: '用户'),
        ],
      ),
      floatingActionButton: Container(
        height: 60,
        width: 60,
        padding: const EdgeInsets.all(4),
        margin: const EdgeInsets.only(top: 4),
        decoration: BoxDecoration(
            color: Colors.white, borderRadius: BorderRadius.circular(30)),
        child: FloatingActionButton(
          backgroundColor: _currentIndex == 2 ? Colors.red : Colors.blue,
          onPressed: () {
   
            setState(() {
   
              _currentIndex = 2;
            });
          },
          child: const Icon(Icons.add),
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      drawer: Drawer(
        child: Column(
          children: <Widget>[
            DrawerHeader(
              decoration: const BoxDecoration(
                  color: Colors.yellow,
                  image: DecorationImage(
                      image: AssetImage("images/a.jpg"), fit: BoxFit.cover)),
              child: ListView(
                children: const <Widget>[],
              ),
            ),
            const ListTile(
              title: Text("个人中心"),
              leading: CircleAvatar(child: Icon(Icons.people)),
            ),
            const Divider(),
            const ListTile(
              title: Text("系统设置"),
              leading: CircleAvatar(child: Icon(Icons.settings)),
            )
          ],
        ),
      ),
      endDrawer: Drawer(
        child: Column(
          children: <Widget>[
            UserAccountsDrawerHeader(
              accountName: const Text("明致成先生"),
              accountEmail: const Text("mzc@byd.com"),
              currentAccountPicture: const CircleAvatar(
                backgroundImage: AssetImage("images/a.jpg"),
              ),
              decoration: const BoxDecoration(
                  color: Colors.blue,
                  image: DecorationImage(
                      image: AssetImage("images/a.jpeg"), fit: BoxFit.cover)),
              otherAccountsPictures: <Widget>[
                Image.asset("images/a.jpg"),
                Image.asset("images/a.jpg"),
                Image.asset("images/a.jpg")
              ],
            ),
            const ListTile(
              title: Text("个人中心"),
              leading: CircleAvatar(child: Icon(Icons.people)),
            ),
            const Divider(),
            const ListTile(
              title: Text("系统设置"),
              leading: CircleAvatar(child: Icon(Icons.settings)),
            )
          ],
        ),
      ),
    );
  }
}

5、Container容器组件

属性	功能（值）
alignment	topCenter：顶部居中对齐； topLeft：顶部左对齐； topRight：顶部右对齐； center：垂直水平居中对齐； centerLeft：垂直居中水平左对齐； centerRight：垂直居中水平右对齐； bottomCenter：底部居中对齐； bottomLeft：底部左对齐； bottomRight：底部右对齐；
decoration	见demo1中`decoration`属性
margin	Container与外部其他组件的距离。`margin:EdgeInsets.all(20.0)`
padding	Container的内边距，指Container边缘与Child之间的距离；`padding:EdgeInsets.all(10.0)`
transform	让Container容易进行一些旋转之类的操作；`transform:Matrix4.rotationZ(0.2)`
height	容器高度
width	容器宽度
child	容器子元素

demo1：

import 'package:flutter/material.dart';

void main() {
   
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: const Text("你好Flutter")),
      body: const MyApp(),
    ),
  ));
}

class MyApp extends StatelessWidget {
   
  const MyApp({
   super.key});

  @override
  Widget build(BuildContext context) {
   
    return Center(
      child: Container(
        alignment: Alignment.center,
        height: 200,
        width: 200,
        decoration: BoxDecoration(
          color: Colors.yellow,
          border: Border.all(color: Colors.red, width: 2.0),
          // 边框
          borderRadius: BorderRadius.circular((8)),
          // 圆角
          boxShadow: const [
            BoxShadow(
              color: Colors.blue,
              offset: Offset(2.0, 2.0),
              blurRadius: 10.0,
            )
          ],
          gradient: const LinearGradient(
            colors: [Colors.red, Colors.orange],
          ), // LinearGradient 背景线性渐变 RadialGradient径向渐变
        ),
        transform: Matrix4.rotationZ(.2),
        child: const Text(
          "你好Flutter",
          style: TextStyle(fontSize: 20),
        ),
      ),
    );
  }
}

6、Text组件

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

TextStyle组件参数：

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

import 'package:flutter/material.dart';

void main() {
   
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: const Text("你好Flutter")),
      body: const MyApp(),
    ),
  ));
}

class MyApp extends StatelessWidget {
   
  const MyApp({
   super.key});

  @override
  Widget build(BuildContext context) {
   
    return Center(
      child: Container(
        alignment: Alignment.center,
        height: 200,
        width: 200,
        decoration: BoxDecoration(
            color: Colors.yellow,
            gradient: const LinearGradient(
              colors: [Colors.red, Colors.orange],
            ),
            boxShadow: const [
              BoxShadow(
                color: Colors.blue,
                offset: Offset(2.0, 2.0),
                blurRadius: 10.0,
              )
            ],
            border: Border.all(color: Colors.black, width: 1)),
        transform: Matrix4.rotationZ(.2),
        child: const Text('这是容器组件的子组件，文本组件',
            textAlign: TextAlign.left,
            overflow: TextOverflow.ellipsis,
            maxLines: 2,
            textScaleFactor: 1.8,
            style: TextStyle(
                fontSize: 16.0,
                color: Colors.black,
                fontWeight: FontWeight.w800,
                fontStyle: FontStyle.italic,
                decoration: TextDecoration.lineThrough,
                decorationColor: Colors.white,
                decorationStyle: TextDecorationStyle.dashed,
                letterSpacing: 5.0)),
      ),
    );
  }
}

7、图片组件

Flutter 中，我们可以通过 Image 组件来加载并显示图片，Image 的数据源可以是asset、文件、内存以及网络。

Image组件的常用属性：

属性	功能（值）
alignment	图片的对齐方式`Alignment.center`
color	设置图片的背景颜色`Colors.pink`，通常和`colorBlendMode`配合一起使用，这样可以是图片颜色和背景色混合
colorBlendMode	`BlendMode.color`
fit	控制图片的拉伸和挤压，这都是根据父容器来的。 `BoxFit.fill`:全图显示，图片会被拉伸，并充满父容器； `BoxFit.contain`:全图显示，显示原比例，可能会有空隙； `BoxFit.cover`：显示可能拉伸，可能裁切，充满（图片要充满整个容器，还不变形）； `BoxFit.fitWidth`：宽度充满（横向充满），显示可能拉伸，可能裁切； `BoxFit.fitHeight` ：高度充满（竖向充满）,显示可能拉伸，可能裁切； `BoxFit.scaleDown`：效果和contain差不多，但是此属性不允许显示超过源图片大小，可小不可大。
repeat	平铺。 `ImageRepeat.repeat` : 横向和纵向都进行重复，直到铺满整个画布。 `ImageRepeat.repeatX`: 横向重复，纵向不重复。 `ImageRepeat.repeatY`：纵向重复，横向不重复。
width	宽度，一般结合`ClipOval`才能看到效果
height	高度，一般结合`ClipOval`才能看到效果

加载远程图片 Image.network()

import 'package:flutter/material.dart';

void main() {
   
  runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: const Text("你好Flutter")), body: const MyApp()),
  ));
}

class MyApp extends StatelessWidget {
   
  const MyApp({
   super.key});

  @override
  Widget build(BuildContext context) {
   
    return Center(
      child: Container(
        width: 150,
        height: 150,
        decoration: const BoxDecoration(color: Colors.yellow),
        child: Image.network(
          "https://t7.baidu.com/it/u=3635362084,1992212334&fm=193&f=GIF",
          fit: BoxFit.cover,
        ),
      ),
    );
  }
}

加载本地图片 Image.asset()

项目根目录新建images文件夹,images中新建2.x 3.x对应的文件
打开pubspec.yaml 声明添加的图片文件，注意: 空格
组件引入使用

import 'package:flutter/material.dart';

void main() {
   
  runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: const Text("你好Flutter")), body: const MyApp()),
  ));
}

class MyApp extends StatelessWidget {
   
  const MyApp({
   super.key});

  @override
  Widget build(BuildContext context) {
   
    return Center(
      child: Image.asset("images/a.jpg",
          width: 150.0, height: 150.0, fit: BoxFit.cover),
    );
  }
}

Container()实现圆形图片

import 'package:flutter/material.dart';

void main() {
   
  runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: const Text("你好Flutter")), body: const MyApp()),
  ));
}

class MyApp extends StatelessWidget {
   
  const MyApp({
   super.key});

  @override
  Widget build(BuildContext context) {
   
    return Center(
      child: Container(
        width: 150,
        height: 150,
        decoration: BoxDecoration(
            color: Colors.yellow,
            borderRadius: BorderRadius.circular(75),
            image: const DecorationImage(
                image: NetworkImage(
                  "https://t7.baidu.com/it/u=3635362084,1992212334&fm=193&f=GIF",
                ),
                fit: BoxFit.cover)),
      ),
    );
  }
}

ClipOval()实现圆形图片

import 'package:flutter/material.dart';

void main() {
   
  runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: const Text("你好Flutter")), body: const MyApp()),
  ));
}

class MyApp extends StatelessWidget {
   
  const MyApp({
   super.key});

  @override
  Widget build(BuildContext context) {
   
    return Center(
      child: ClipOval(
        child: Image.asset(
            "images/a.jpg",
            width: 150.0,
            height: 150.0,
            fit: BoxFit.cover),
      ),
    );
  }
}

CircleAvatar()实现圆形图片

import 'package:flutter/material.dart';

void main() {
   
  runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: const Text("你好Flutter")), body: const MyApp()),
  ));
}

class MyApp extends StatelessWidget {
   
  const MyApp({
   super.key});

  @override
  Widget build(BuildContext context) {
   
    return const Center(
      child: CircleAvatar(
        radius: 200, // 圆的半径
        backgroundImage: AssetImage("images/a.jpg"),
      ),
    );
  }
}

CircleAvatar()不提供设置边框的属性，但是可以将其包裹在具有更大半径和背景颜色的CircleAvatar()
中，以创建类似于边框的效果。

import 'package:flutter/material.dart';

void main() {
   
  runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: const Text("你好Flutter")), body: const MyApp()),
  ));
}

class MyApp extends StatelessWidget {
   
  const MyApp({
   super.key});

  @override
  Widget build(BuildContext context) {
   
    return const Center(
      child: CircleAvatar(
        radius: 110,
        backgroundColor: Colors.pink,
        child: CircleAvatar(
          radius: 100,
          backgroundImage: AssetImage("images/a.jpg"),
        ),
      ),
    );
  }
}

8、图标组件

使用flutter官方icons图标

Material Design所有图标可以在其官网查看：https://material.io/tools/icons/

import 'package:flutter/material.dart';

void main() {
   
  runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: const Text("你好Flutter")), body: const MyApp()),
  ));
}

class MyApp extends StatelessWidget {
   
  const MyApp({
   super.key});

  @override
  Widget build(BuildContext context) {
   
    return const Center(
      child: Column(
        children: [
          Icon(Icons.search, color: Colors.red, size: 40),
          SizedBox(height: 10),
          Icon(Icons.home),
          SizedBox(height: 10),
          Icon(Icons.category),
          SizedBox(height: 10),
          Icon(Icons.shop),
          SizedBox(height: 10),
        ],
      ),
    );
  }
}

借助阿里巴巴图标库自定义字体图标

阿里巴巴图标库官网上有很多字体图标素材，我们可以选择自己需要的图标打包下载后，会生成一些不同格式的字体文件。
在Flutter中，我们使用ttf格式即可。

导入字体图标文件：项目根目录新建fonts文件夹，将我们下载的字体图标文件保存在该目录下；即"
fonts/iconfont.ttf"
打开pubspec.yaml 声明添加的字体文件，注意: 空格
为了使用方便，我们定义一个MyIcons类，功能和Icons类一样：将字体文件中的所有图标都定义成静态变量；

import 'package:flutter/material.dart';

void main() {
   
  runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: const Text("你好Flutter")), body: const MyApp()),
  ));
}

class MyApp extends StatelessWidget {
   
  const MyApp({
   super.key});

  @override
  Widget build(BuildContext context) {
   
    return const Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Icon(MyIcons.book, color: Colors.purple),
          Icon(MyIcons.wechat, color: Colors.green),
        ],
      ),
    );
  }
}

class MyIcons {
   
  // book 图标
  static const IconData book =
  IconData(0xe614, fontFamily: 'myIcon', matchTextDirection: true);

  // 微信图标
  static const IconData wechat =
  IconData(0xec7d, fontFamily: 'myIcon', matchTextDirection: true);
}

9、ListView列表组件

列表分为：垂直列表、垂直图文列表、水平列表、动态列表

列表组件常用属性：

属性	值（功能）
scrollDirection	`Axis.horizontal`水平列表；`Axis.vertical`垂直列表；
padding	内边距
reverse	组件反向排序
children	列表元素

垂直列表

demo1：

import 'package:flutter/material.dart';

void main() {
   
  runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: const Text("你好Flutter")), body: const MyApp()),
  ));
}

class MyApp extends StatelessWidget {
   
  const MyApp({
   super.key});

  @override
  Widget build(BuildContext context) {
   
    return ListView(
      children: const <Widget>[
        ListTile(
          title: Text("我是一个标题"),
        ),
        ListTile(
          title: Text("我是一个标题"),
        ),
        ListTile(
          title: Text("我是一个标题"),
        ),
        ListTile(
          title: Text("我是一个标题"),
        ),
        ListTile(
          title: Text("我是一个标题"),
        ),
        ListTile(
          title: Text("我是一个标题"),
        ),
        ListTile(
          title: Text("我是一个标题"),
        ),
      ],
    );
  }
}

demo2：

import 'package:flutter/material.dart';

void main() {
   
  runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: const Text("你好Flutter")), body: const MyApp()),
  ));
}

class MyApp extends StatelessWidget {
   
  const MyApp({
   super.key});

  @override
  Widget build(BuildContext context) {
   
    return ListView(
      children: const <Widget>[
        ListTile(
          leading: Icon(Icons.assignment, color: Colors.red),
          title: Text("全部订单"),
        ),
        Divider(),
        ListTile(
          leading: Icon(Icons.payment, color: Colors.green),
          title: Text("待付款"),
        ),
        Divider(),
        ListTile(
          leading: Icon(Icons.local_car_wash, color: Colors.orange),
          title: Text("待收货"),
        ),
        ListTile(
          leading: Icon(Icons.favorite, color: Colors.lightGreen),
          title: Text("我的收藏"),
        ),
        Divider(),
        ListTile(
          leading: Icon(Icons.people, color: Colors.black54),
          title: Text("在线客服"),
        ),
        Divider(),
      ],
    );
  }
}

垂直图文列表

demo1：

import 'package:flutter/material.dart';

void main() {
   
  runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: const Text("你好Flutter")), body: const MyApp()),
  ));
}

class MyApp extends StatelessWidget {
   
  const MyApp({
   super.key});

  @override
  Widget build(BuildContext context) {
   
    return ListView(
      children: <Widget>[
        ListTile(
          leading: Image.network("https://t7.baidu.com/it/u=3635362084,1992212334&fm=193&f=GIF"),
          title: const Text('华北黄淮高温雨今起强势登场'),
          subtitle: const Text("中国天气网讯 21日开始，华北黄淮高温雨今起强势登场"),
        ),
        const Divider(),
        ListTile(
          leading: Image.network("https://t7.baidu.com/it/u=3635362084,1992212334&fm=193&f=GIF"),
          title: const Text('保监局50天开32罚单 “断供”违规资金为房市降温'),
          subtitle: const Text("中国天气网讯 保监局50天开32罚单 “断供”违规资金为房市降温"),
        ),
        const Divider(),
        ListTile(
            title: const Text('华北黄淮高温雨今起强势登场'),
            subtitle: const Text("中国天气网讯 21日开始，华北黄淮高温雨今起强势登场"),
            trailing:
            Image.network("https://t7.baidu.com/it/u=3635362084,1992212334&fm=193&f=GIF")),
        const Divider(),
        ListTile(
          leading: Image.network("https://t7.baidu.com/it/u=3635362084,1992212334&fm=193&f=GIF"),
          title: const Text('普京现身俄海军节阅兵：乘艇检阅军舰'),
        ),
        const Divider(),
        ListTile(
          leading: Image.network("https://t7.baidu.com/it/u=3635362084,1992212334&fm=193&f=GIF"),
          title: const Text('鸿星尔克捐1个亿帮助困难残疾群体 网友：企业有担当'),
        ),
        const Divider(),
        ListTile(
          leading: Image.network("https://t7.baidu.com/it/u=3635362084,1992212334&fm=193&f=GIF"),
          title: const Text('行业冥灯？老罗最好祈祷苹果的AR能成'),
        ),
      ],
    );
  }
}

demo2：

import 'package:flutter/material.dart';

void main() {
   
  runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: const Text("你好Flutter")), body: const MyApp()),
  ));
}

class MyApp extends StatelessWidget {
   
  const MyApp({
   super.key});

  @override
  Widget build(BuildContext context) {
   
    return ListView(
      padding: const EdgeInsets.all(10),
      children:

最低0.47元/天解锁文章

明致成

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
flutter基础组件概览

每一个flutter项目的lib目录里面都有一个main.dart，这个文件就是flutter的入口文件；其中的main方法是dart的入口方法。runApp方法是flutter的入口方法。demo1：Text展示文本demo2：TextStyle增加样式demo3：AppBar与body展示demo4：抽离组件内容为HomeWidget3、内容单独抽离为组件demo1：demo2：4、MaterialApp组件、Scaffold组件MaterialApp它封装了应用程序实现Materi
复制链接

扫一扫