【第五章 flutter学习之flutter进阶组件-上篇】

灰太狼大王灬2023-08-08 21:39

文章目录

一、列表组件

1.常规列表

js 复制代码 
 children: const <Widget>[
        ListTile(
          leading: Icon(
            Icons.airplay,
            color: Color.fromARGB(255, 89, 54, 244),
          ),
          title: Text("我是标题2", style: TextStyle(fontSize: 20)),
          subtitle: Text("内容", style: TextStyle(fontSize: 16)),
          trailing: Icon(Icons.access_time_sharp),
        ),
      ],

children可以复制多个组成列表

设置纵向列表方向

js 复制代码 
class MyHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        height: 800.0,
        margin: EdgeInsets.all(5),
        child: ListView(
          //设置列表为水平列表
          scrollDirection: Axis.horizontal,
          children: <Widget>[
            Container(
              width: 100.0,
              color: Colors.lightBlue,
              child: ListView(children: [Text("WWWW")]),
            ),
            Container(
              width: 180.0,
              color: Colors.deepPurpleAccent,
            ),
          ],
        ));
  }
}

2.动态列表

Flutter动态列表可以通过ListView.builder或ListView.separated来实现。

如下例

js 复制代码 
List<String> items = ['Item 1', 'Item 2', 'Item 3'];

ListView.builder(
  itemCount: items.length,
  itemBuilder: (BuildContext context, int index) {
    return ListTile(
      title: Text(items[index]),
    );
  },
)

二、FridView组件

Filutter 是一个开源的 JavaScript 库，用于创建和管理可过滤和可排序的数据表。FridView 是 Filutter 库中的一个组件，用于在数据表中显示数据行。FridView 组件具有以下特点：

响应式设计：FridView 组件可以自适应不同屏幕大小，确保在各种设备上显示效果良好。

虚拟滚动：当数据量很大时，FridView 组件会使用虚拟滚动技术，只渲染当前可见区域的数据行，从而提高渲染性能。

可定制：FridView 组件提供了丰富的配置选项和事件回调，可以根据需求进行定制。

键盘和触摸支持：FridView 组件支持使用键盘和触摸设备进行导航和操作。

筛选和排序：FridView 组件可以与 Filutter 的其他组件（如 FilterBar 和 SortBy）结合使用，实现数据的筛选和排序功能。

三、Stack层叠组件

在Flutter中，Stack层叠组件用于堆叠多个子组件，使得它们按照堆叠顺序相互叠加。这使得您可以轻松地创建复杂的布局，如重叠的图片、按钮等。要在Flutter中使用Stack组件，请遵循以下步骤：

导入Flutter库：

import 'package:flutter/material.dart';

在您的代码中创建一个Stack组件，并添加一个或多个子组件。子组件将按照添加到Stack中的顺序堆叠。例如：

Stack(
  children: [
    Container(
      color: Colors.blue,
      child: Text('First'),
    ),
    Container(
      color: Colors.red,
      child: Text('Second'),
    ),
    Container(
      color: Colors.green,
      child: Text('Third'),
    ),
  ],
)

在这个例子中，我们创建了一个包含三个Container的Stack。每个Container都有一个不同的背景颜色和文本。这些Container将按照堆叠顺序显示。

根据需要，可以使用Positioned组件来定位子组件。Positioned组件允许您指定子组件在Stack中的位置。例如，将第二个Container定位在Stack的左上角：

Stack(
  children: [
    Container(
      color: Colors.blue,
      child: Text('First'),
    ),
    Positioned(
      top: 10,
      left: 10,
      child: Container(
        color: Colors.red,
        child: Text('Second'),
      ),
    ),
    Container(
      color: Colors.green,
      child: Text('Third'),
    ),
  ],
)

在这个例子中，我们使用了Positioned组件来定位第二个Container。这样，它将显示在第一个Container的左上角。

您可以根据需要调整Stack组件的属性，例如alignment、fit等。例如，将Stack的对齐方式设置为居中：

Stack(
  alignment: Alignment.center,
  children: [
    // ...
  ],
)

通过这些步骤，您可以在Flutter中使用Stack组件来创建复杂的布局。

四、AspectRatio Card CircleAvatar组件

AspectRatio、Card 和 CircleAvatar 是 Flutter 中的三个组件，它们通常一起使用以创建一个具有特定形状和比例的圆形头像。

下面是如何将它们组合在一起创建一个圆形头像组件的示例

首先，确保你已经在你的 Flutter 项目中引入了所需的包：

import 'package:flutter/material.dart';

创建一个名为 CircleAvatarWithAspectRatio 的新组件，它将包含 AspectRatio 和 CircleAvatar：

class CircleAvatarWithAspectRatio extends StatelessWidget {
  final String imageUrl;
  final double radius;

  const CircleAvatarWithAspectRatio({
    Key? key,
    required this.imageUrl,
    this.radius = 50.0,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return AspectRatio(
      aspectRatio: 1,
      child: ClipRRect(
        borderRadius: BorderRadius.circular(radius),
        child: ***work(
          imageUrl,
          fit: BoxFit.cover,
        ),
      ),
    );
  }
}

在你的主界面（例如，main.dart）中，使用 CircleAvatarWithAspectRatio 组件：

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: Center(
          child: CircleAvatarWithAspectRatio(
            imageUrl: '***',
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个名为 CircleAvatarWithAspectRatio 的新组件，它包含一个 AspectRatio 组件，用于确保头像具有正方形形状（即宽度等于高度）。然后，我们使用 ClipRRect 组件将头像裁剪成圆形，并使用 ***work 组件加载网络图片。最后，我们在主界面中使用 CircleAvatarWithAspectRatio 组件来显示头像。

五、按钮组件

在 Flutter 中，按钮组件（Button）是一个非常重要的组件，用于响应用户的点击操作。

在 Flutter 中，你可以使用 ElevatedButton、OutlineButton、TextButton、IconButton 等多种类型的按钮。下面是一个简单的 Flutter 按钮组件示例：

js 复制代码 
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Button Example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Button Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              print('Button pressed!');
            },
            child: Text('Click me!'),
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们首先导入了 flutter/material.dart，然后创建了一个名为 MyApp 的 StatelessWidget。在 build 方法中，我们创建了一个 MaterialApp，其中包含一个 Scaffold。在 Scaffold 中，我们添加了一个居中的 ElevatedButton，点击时将打印 "Button pressed!"。

你可以根据需要自定义按钮的样式、颜色、大小和文本等属性。Flutter 提供了丰富的组件和属性，可以满足各种应用程序的 UI 需求。

六、Stack组件

Flutter Stack组件是一个用于堆叠多个子组件的容器，允许在z轴方向上叠加子组件。这使得子组件可以相互重叠，从而创建出丰富的视觉效果。Stack组件具有以下特点：

灵活性：Stack组件允许您根据需要调整子组件的大小、位置和顺序。

高度自定义：Stack组件允许您使用各种装饰器和定位器来调整子组件的外观和行为。

性能优化：Flutter引擎对Stack组件进行了优化，使其在渲染大量子组件时表现良好。

以下是一个简单的Flutter Stack组件示例：

js 复制代码 
import 'package:flutter/material.dart';

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

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

class StackExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(
          height: 200,
          width: 200,
          color: Colors.red,
        ),
        Positioned(
          top: 10,
          left: 10,
          child: Container(
            height: 100,
            width: 100,
            color: Colors.blue,
          ),
        ),
        Positioned(
          bottom: 10,
          right: 10,
          child: Container(
            height: 50,
            width: 50,
            color: Colors.green,
          ),
        ),
      ],
    );
  }
}

在这个示例中，我们创建了一个包含三个子组件的Stack：一个红色的正方形、一个蓝色的矩形和一个绿色的圆形。我们使用Positioned组件来指定每个子组件在Stack中的位置。

七、Wrap组件

filutter 是一个虚构的库，但我们可以假设它包含了一个名为 Wrap 的组件。在许多库和框架中，Wrap 组件通常用于包装其他组件，以实现特定的布局或样式。以下是一个虚构的 filutter Wrap 组件的示例，使用 React 和 TypeScript 编写：

js 复制代码 
typescript
import React from 'react';

interface WrapProps {
  children: React.ReactNode;
  direction?: 'horizontal' | 'vertical';
  spacing?: number;
  align?: 'flex-start' | 'center' | 'flex-end';
}

const Wrap: React.FC<WrapProps> = ({
  children,
  direction = 'horizontal',
  spacing = 0,
  align = 'flex-start',
}) => {
  const style: React.CSSProperties = {
    display: 'flex',
    flexDirection: direction,
    alignItems: align,
    justifyContent: align,
  };

  return (
    <div style={style}>
      {React.Children.map(children, (child, index) => (
        <div style={{ margin: spacing }}>{child}</div>
      ))}
    </div>
  );
};

export default Wrap;

这个虚构的 filutter Wrap 组件接受以下属性：

children：要包装的子组件。

direction：布局方向，可以是 'horizontal' (默认) 或 'vertical'。

spacing：组件之间的间距，默认为 0。

align：对齐方式，可以是 'flex-start' (默认)、'center' 或 'flex-end'。

组件使用 CSS 样式将子组件包装在 flex 容器中，并根据提供的属性设置布局方向、间距和对齐方式。你可以根据实际需求调整这个例子以适应你的需求。

八、StatefulWidget有状态组件

StatefulWidget 是一种特殊的 Widget，它可以拥有可变的状态。这种组件通常用于需要处理用户交互、动画或其他需要更新状态的场景。要创建一个有状态组件，需要继承 StatefulWidget 类并实现 createState 方法，以创建一个与之关联的 State 对象。

以下是一个简单的有状态组件示例：

js 复制代码 
class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('点击次数：$_counter'),
      alignment: Alignment.center,
      color: Colors.blue,
    );
  }
}

在这个例子中，我们创建了一个名为 MyStatefulWidget 的有状态组件。它包含一个名为 _MyStatefulWidgetState 的内部类，该类实现了 State 类。我们为这个组件添加了一个名为 _counter 的变量来跟踪点击次数。

在 _incrementCounter 方法中，我们使用 setState 方法来更新组件的状态。当状态发生变化时，Flutter 会重新构建组件，并调用 build 方法。在这个例子中，我们使用 Text Widget 来显示点击次数，并使用 Container Widget 来设置背景颜色和文本对齐方式。

要使用这个有状态组件，只需在 Flutter 应用中的 build 方法中引用它即可。

总结

相关推荐
Dizzy.51728 分钟前
数据结构(查找)
数据结构·学习·算法
lalapanda1 小时前
Unity学习part4
学习
啄缘之间2 小时前
4.6 学习UVM中的“report_phase“，将其应用到具体案例分为几步？
学习·verilog·uvm·sv
viperrrrrrrrrr75 小时前
大数据学习(49) - Flink按键分区状态（Keyed State）
大数据·学习·flink
red_redemption5 小时前
自由学习记录（36）
学习
freflying11196 小时前
使用jenkins构建Android+Flutter项目依赖自动升级带来兼容性问题及Jenkins构建速度慢问题解决
android·flutter·jenkins
黑金IT6 小时前
将Neo4j用于Python学习的创新方法
python·学习·neo4j
StickToForever7 小时前
第4章 信息系统架构（二）
经验分享·笔记·学习·职场和发展
19岁开始学习8 小时前
Go学习-入门
开发语言·学习·golang
机器瓦力8 小时前
Flutter应用开发：对象存储管理图片
flutter
热门推荐
01本地部署DeepSeek教程（Mac版本）02如何在WPS和Word/Excel中直接使用DeepSeek功能03DeepSeek本地部署详细指南04DeepSeek各版本说明与优缺点分析05本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程06DeepSeek r1本地安装全指南07太炸裂了！清华大学deepseek从入门到精通使用手册又出第三版了，《普通人如何抓住DeepSeek红利》（无套路，直接下载）08DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具09在Windows下安装Ollama并体验DeepSeek r1大模型10Page Assist - 本地Deepseek模型 Web UI 的安装和使用