Flutter基础控件

news2024/10/7 16:27:46

Text:文字

Text("Flutter")

 Text是最常用也是最基础的，目前学习阶段只用来加载文字数据，更多属性和样式设置请查看源码自己探索。

Button:按钮

 ElevatedButton:普通按钮

ElevatedButton(
  onPressed: () {
    if (kDebugMode) {
      print("ElevatedButton");
    }
  },
  child: const Text("普通按钮"),
),

TextButton:文本按钮

TextButton(
  onPressed: () {
    if (kDebugMode) {
      print("TextButton");
    }
  },
  child: const Text("文本按钮"),
),

 OutlinedButton:带边框按钮

OutlinedButton(
  onPressed: () {
    if (kDebugMode) {
      print("OutlinedButton");
    }
  },
  child: const Text("带边框的按钮"),
),

 IconButton:图片按钮

IconButton(
  onPressed: () {
    if (kDebugMode) {
      print("IconButton");
    }
  },
  icon: const Icon(Icons.thumb_up),
)

 带图片的文本按钮，只需要在各控件后加.icon就可以了

ElevatedButton.icon(
  onPressed: () {
    if (kDebugMode) {
      print('点击了发送按钮');
    }
  },
  icon: const Icon(Icons.send),
  label: const Text("发送"),
),

 自定义样式按钮

 ElevatedButton(
   style: ButtonStyle(
     backgroundColor: MaterialStateProperty.all(Colors.red), //背景颜色
     foregroundColor:
         MaterialStateProperty.all(Colors.white), //文字图标颜色
   ),
   onPressed: () {
     if (kDebugMode) {
       print("ElevatedButton");
     }
   },
   child: const Text("普通按钮"),
 )

大按钮和设置按钮大小可以在容器里面设置按钮 

Container(
  width: 100,
  height: 60,
  margin: const EdgeInsets.all(10),
  child: ElevatedButton.icon(
    onPressed: () {},
    icon: const Icon(Icons.search),
    label: const Text("搜索"),
  ),

 加样式的各种圆角和边框按钮

Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: [
    ElevatedButton(
      style: ButtonStyle(
        shape: MaterialStateProperty.all(
          RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(20),
          ),
        ),
      ),
      onPressed: () {},
      child: const Text("圆角"),
    ),
    ElevatedButton(
      style: ButtonStyle(
        shape: MaterialStateProperty.all(
          const RoundedRectangleBorder(
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(20),
              bottomRight: Radius.circular(20),
            ),
          ),
        ),
      ),
      onPressed: () {},
      child: const Text("任意圆角"),
    ),
    ElevatedButton(
      style: ButtonStyle(
        shape: MaterialStateProperty.all(
          const RoundedRectangleBorder(
            borderRadius: BorderRadius.vertical(
              top: Radius.circular(0),
              bottom: Radius.circular(20),
            ),
          ),
        ),
      ),
      onPressed: () {},
      child: const Text("纵横圆角"),
    ),
    SizedBox(
      width: 60,
      height: 60,
      child: ElevatedButton(
        style: ButtonStyle(
          //按钮样式设置
          shape: MaterialStateProperty.all(
            const CircleBorder(
              side: BorderSide(
                width: 2, //边框宽度
                color: Colors.red, //边框颜色
              ),
            ),
          ),
        ),
        onPressed: () {},
        child: const Text("圆形"),
      ),
    ),
  ],
),
const SizedBox(height: 10),
Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: [
    OutlinedButton(
      style: ButtonStyle(
        side: MaterialStateProperty.all(
          //修改边框颜色和宽度
          const BorderSide(
            width: 2,
            color: Colors.red,
          ),
        ),
      ),
      onPressed: () {},
      child: const Text("带边框的按钮"),
    )
  ],
),

 完整代码：

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.blue),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter"),
        ),
        body: const MyHomePage(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const LayoutDemo();
  }
}

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

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            ElevatedButton(
              onPressed: () {
                if (kDebugMode) {
                  print("ElevatedButton");
                }
              },
              child: const Text("普通按钮"),
            ),
            TextButton(
              onPressed: () {
                if (kDebugMode) {
                  print("TextButton");
                }
              },
              child: const Text("文本按钮"),
            ),
            OutlinedButton(
              onPressed: () {
                if (kDebugMode) {
                  print("OutlinedButton");
                }
              },
              child: const Text("带边框的按钮"),
            ),
            IconButton(
              onPressed: () {
                if (kDebugMode) {
                  print("IconButton");
                }
              },
              icon: const Icon(Icons.thumb_up),
            )
          ],
        ),
        const SizedBox(height: 10),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            ElevatedButton.icon(
              onPressed: () {
                if (kDebugMode) {
                  print('点击了发送按钮');
                }
              },
              icon: const Icon(Icons.send),
              label: const Text("发送"),
            ),
            TextButton.icon(
              onPressed: () {
                if (kDebugMode) {
                  print('分享');
                }
              },
              icon: const Icon(Icons.share),
              label: const Text("分享"),
            ),
            OutlinedButton.icon(
              onPressed: () {},
              icon: const Icon(Icons.add),
              label: const Text("增加"),
            )
          ],
        ),
        const SizedBox(height: 10),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            ElevatedButton(
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all(Colors.red), //背景颜色
                foregroundColor:
                    MaterialStateProperty.all(Colors.white), //文字图标颜色
              ),
              onPressed: () {
                if (kDebugMode) {
                  print("ElevatedButton");
                }
              },
              child: const Text("普通按钮"),
            )
          ],
        ),
        const SizedBox(height: 10),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Expanded(
              flex: 1,
              child: Container(
                height: 60,
                margin: const EdgeInsets.all(10),
                child: ElevatedButton(
                  onPressed: () {},
                  child: const Text("大按钮"),
                ),
              ),
            ),
            Container(
              width: 100,
              height: 60,
              margin: const EdgeInsets.all(10),
              child: ElevatedButton.icon(
                onPressed: () {},
                icon: const Icon(Icons.search),
                label: const Text("搜索"),
              ),
            )
          ],
        ),
        const SizedBox(height: 10),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            ElevatedButton(
              style: ButtonStyle(
                shape: MaterialStateProperty.all(
                  RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(20),
                  ),
                ),
              ),
              onPressed: () {},
              child: const Text("圆角"),
            ),
            ElevatedButton(
              style: ButtonStyle(
                shape: MaterialStateProperty.all(
                  const RoundedRectangleBorder(
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(20),
                      bottomRight: Radius.circular(20),
                    ),
                  ),
                ),
              ),
              onPressed: () {},
              child: const Text("任意圆角"),
            ),
            ElevatedButton(
              style: ButtonStyle(
                shape: MaterialStateProperty.all(
                  const RoundedRectangleBorder(
                    borderRadius: BorderRadius.vertical(
                      top: Radius.circular(0),
                      bottom: Radius.circular(20),
                    ),
                  ),
                ),
              ),
              onPressed: () {},
              child: const Text("纵横圆角"),
            ),
            SizedBox(
              width: 60,
              height: 60,
              child: ElevatedButton(
                style: ButtonStyle(
                  //按钮样式设置
                  shape: MaterialStateProperty.all(
                    const CircleBorder(
                      side: BorderSide(
                        width: 2, //边框宽度
                        color: Colors.red, //边框颜色
                      ),
                    ),
                  ),
                ),
                onPressed: () {},
                child: const Text("圆形"),
              ),
            ),
          ],
        ),
        const SizedBox(height: 10),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            OutlinedButton(
              style: ButtonStyle(
                side: MaterialStateProperty.all(
                  //修改边框颜色和宽度
                  const BorderSide(
                    width: 2,
                    color: Colors.red,
                  ),
                ),
              ),
              onPressed: () {},
              child: const Text("带边框的按钮"),
            )
          ],
        ),
      ],
    );
  }
}

Card:卡片

 Card相当于原生中的CardView控件，用于卡片样式布局。

完整代码：

import 'package:flutter/material.dart';
import 'package:flutter_demo/res/listData.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.blue),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter"),
        ),
        body: const MyHomePage(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const LayoutDemo();
  }
}

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

  List<Widget> _initCardData() {
    var tempList = listData.map((value) {
      //卡片控件
      return Card(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)), //圆角大小
        elevation: 10, //阴影深度
        margin: const EdgeInsets.all(10),//四周间距
        child: Column(
          children: [
            AspectRatio(
              aspectRatio: 16 / 9,//屏幕比例
              child: Image.network(value["imageUrl"], fit: BoxFit.cover),
            ),
            ListTile(
              //ClipOval实现圆角图片设置
              /*leading: ClipOval(
                child: Image.network(
                  value["imageUrl"],
                  fit: BoxFit.cover,
                  width: 40,
                  height: 40,
                ),
              ),*/
              //CircleAvatar实现圆角图片设置
              leading: CircleAvatar(
                backgroundImage: NetworkImage(value["imageUrl"]),
              ),
              title: Text(value["title"]),
              subtitle: Text(value["author"]),
            ),
          ],
        ),
      );
    });
    return tempList.toList();
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: _initCardData(),
    );
  }
}

Card控件下的shape属性用于设置卡片样式，elevation属性用于设置卡片阴影深度。

AspectRatio控件设置图片比例。

ListView实现数据列表，相当于原生ScrollView、NestedScrollView、ListView、RecyclerView。

ListTile填充列表数据，title属性添加列表标题，subtitle为副标题，还有更多属性请查看ListTile源码。

CircleAvatar或者ClipOval控件实现圆形图片显示。

数据文件listData.dart

List listData = [
  {
    "title": "图一",
    "author": "程序员",
    "imageUrl": "https://www.itying.com/images/flutter/1.png",
  },
  {
    "title": "图二",
    "author": "程序员",
    "imageUrl": "https://www.itying.com/images/flutter/2.png",
  },
  {
    "title": "图三",
    "author": "程序员",
    "imageUrl": "https://www.itying.com/images/flutter/3.png",
  },
  {
    "title": "图四",
    "author": "程序员",
    "imageUrl": "https://www.itying.com/images/flutter/4.png",
  },
  {
    "title": "图五",
    "author": "程序员",
    "imageUrl": "https://www.itying.com/images/flutter/5.png",
  },
  {
    "title": "图六",
    "author": "程序员",
    "imageUrl": "https://www.itying.com/images/flutter/6.png",
  },
];

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/720350.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【Python爬虫与数据分析】进程、线程、协程

【Python爬虫与数据分析】进程、线程、协程

目录 一、概述 二、进程的创建 三、线程的创建 四、协程的创建 五、全局变量的共享问题 六、消息队列与互斥锁 七、池化技术 一、概述 进程是系统分配资源的基本单位&#xff0c;线程是CPU调度的基本单位。 一个进程可包含多个线程&#xff0c;一个线程可包含多个协程&…
阅读更多...
【C++11】可变参数的函数模板 的 定义 和 应用练习

【C++11】可变参数的函数模板 的 定义 和 应用练习

文章目录 定义常见应用模板参数包展开可变参数模板类可变参数模板函数重载 练习打印任意数量的参数将任意数量的参数合并为一个字符串解包元组&#xff08;Tuple Unpacking&#xff09; emplace_back和 push_back 的比较实例 定义 可变参数模板&#xff08;Variable-length ar…
阅读更多...
IT技术相关网站

IT技术相关网站

OSCHINA - 中文开源技术交流社区https://www.oschina.net CSDN - 专业开发者社区https://www.csdn.netSegmentFault 思否 - 中国领先的开发者技术社区https://segmentfault.com 有穹_一个开发者的作品发布平台https://www.youqiong.net牛客网 - 找工作神器|笔试题库|面试经验|实…
阅读更多...
完美适配小爱课程表（河南科技学院）

完美适配小爱课程表（河南科技学院）

1.前言&#xff1a; 前文请参照我的以前的博客&#xff1a; 青果教务系统适配小爱课程表 本文代码现已开源&#xff1a; 小爱课程表适配gitee小爱课程表适配github 去年的时候试着适配了我们学校的小爱课程表&#xff0c;但是由于水平不够&#xff0c;直接把接口以及参数照搬&a…
阅读更多...
redhawk: ir drop如何计算？effective instance resistance和min res path有什么区别？

redhawk: ir drop如何计算？effective instance resistance和min res path有什么区别？

往期文章链接: redhawk: static analysis redhawk: dynamic analysis redhawk: 什么timing window？
阅读更多...
网络安全（黑客）自学！走进黑客的世界

网络安全（黑客）自学！走进黑客的世界

谈起黑客&#xff0c;可能各位都会想到&#xff1a;盗号&#xff0c;其实不尽然&#xff1b;黑客是一群喜爱研究技术的群体&#xff0c;在黑客圈中&#xff0c;一般分为三大圈&#xff1a;娱乐圈 技术圈 职业圈。 娱乐圈&#xff1a;主要是初中生和高中生较多&#xff0c;玩网恋…
阅读更多...
但愿世间不纷争，何惜法典卷生尘——北大团队开源法律大模型chatLaw助力法律垂直领域研究发展

但愿世间不纷争，何惜法典卷生尘——北大团队开源法律大模型chatLaw助力法律垂直领域研究发展

今天看到一个比较热门的项目就是来自于北大研究团队刚刚开源的chatLaw法律领域数据开发构建的大模型&#xff0c;官方项目地址在这里&#xff0c;如下所示&#xff1a; 目前已经收货2.1k的star量还是很不错的了。 官方提供的学术报告文章地址在这里&#xff0c;如下所示&#…
阅读更多...
API接口设计不合理？个人和公司都有问题

API接口设计不合理？个人和公司都有问题

前言 在软件产品或项目开发过程中&#xff0c;往往涉及到大量API接口的开发任务。而一个接口的诞生如果是令人费解的、痛苦折磨的以及有严重后遗症的&#xff0c;究其根本原因还在于设计API接口的时候不够清晰、合理以及缺乏长远考虑。我依据多位同事的问答、实际工作的经验和…
阅读更多...
【rsync】远程同步，快速增量备份

【rsync】远程同步，快速增量备份

rsync远程同步 1.rsync远程同步1.1 rsync概述1.2 下行同步1.3 远程文件同步总结 2. 搭建rsync远程文件同步2.1 搭建rsync远程下行同步2.1.1 配置rsync服务器端&#xff08;同步源&#xff09;2.1.2 配置rsync客户机&#xff08;发起端&#xff09; 2.2 免交互配置2.3 rysnc认证…
阅读更多...
水电站运行数据3D可视化展示方便管理运维

水电站运行数据3D可视化展示方便管理运维

水电站是现代能源体系中的重要组成部分&#xff0c;对于保障国家能源安全和经济发展具有重要的意义。然而&#xff0c;由于水电站的建设和管理涉及到大量的技术和专业知识&#xff0c;许多人对水电站的运行和维护存在许多疑惑和困惑。为了解决这些问题&#xff0c;我们引入了全…
阅读更多...
OpenShift 4 - 可观测性之 OpenShift Logging - Loki（附视频）

OpenShift 4 - 可观测性之 OpenShift Logging - Loki（附视频）

《OpenShift / RHEL / DevSecOps 汇总目录》 说明&#xff1a;本文已经在支持 OpenShift 4.12 OpenShift Logging Operator 5.7.2 Loki Operator 5.7.2 的环境中验证 文章目录 OpenShift 基于 Loki 的日志架构安装配置基于 Loki 的日志环境安装 OpenShift Logging Operator 和…
阅读更多...
工地能耗监测系统

工地能耗监测系统

随着全球气候变化的影响日益严重&#xff0c;环保意识逐渐深入人心&#xff0c;绿色建筑和节能减排成为了建筑行业的热门话题。而在建筑工地中&#xff0c;能耗监测成为了一项不可或缺的任务。为了更好地实现能耗监测&#xff0c;工地能耗监测系统应运而生。本文将从以下几个方…
阅读更多...
每日一练 | 华为认证真题练习Day72

每日一练 | 华为认证真题练习Day72

1、Eth-Trunk两端的负载分担模式可以不一致。 A. 对 B. 错 2、如下图所示的网络&#xff0c;交换机使用机接口和路由器的子接口对&#xff0c;则以下哪个配置可以实现这种需求&#xff1f; A. interface Vlanif10 ip address 10.0.12.1 255.255.255.0 # interface Gigabit…
阅读更多...
在Rust中使用torch------day1环境配置Yolov8推理

在Rust中使用torch------day1环境配置Yolov8推理

现在不管什么专业,貌似多多少少都得和深度学习扯上点关系才好写文章(水文章).其中最常用的深度学习框架应该是tensorflow,pytorch这些python的三方库,既然最近在学Rust那就来借机讲讲torch的Rust绑定—tch-rs 其实tch实际上是基于libtorch的封装,而不是pytorch.因此使用起来如…
阅读更多...
云原生——什么是云原生数据库？

云原生——什么是云原生数据库？

❄️作者介绍&#xff1a;奇妙的大歪❄️ &#x1f380;个人名言&#xff1a;但行前路&#xff0c;不负韶华&#xff01;&#x1f380; &#x1f43d;个人简介&#xff1a;云计算网络运维专业人员&#x1f43d; 前言 突然间&#xff0c;云原生数据库就火了。根据IDC《2021年下半…
阅读更多...
WinForm中使用AnyCAD控件

WinForm中使用AnyCAD控件

一、添加DLL程序集 AnyCAD.Foundation.Net.dll AnyCAD.Presentation.Net.dll AnyCAD.Exchange.Net.dll 二、初始化控件 1.首先创建一个窗体 2.在窗体上放置一个Panel用来放置三维控件 3.初始化控件 完整代码如下&#xff1a; using AnyCAD.Presentation; using System; …
阅读更多...
Generalized Category Discovery(论文翻译)

Generalized Category Discovery(论文翻译)

Generalized Category Discovery 摘要1.导言2.相关工作3.广义类发现3.1 我们的方法 图1.我们提出一个新的设置&#xff1a;“广义类别发现”及其解决方法。我们的设置可以简洁地描述为&#xff1a;给定一个子集具有类标签的数据集&#xff0c;对数据集中所有未标记的图像进行分…
阅读更多...
【嵌入式Qt开发入门】如何使用Qt进行绘图——QPainter 绘图

【嵌入式Qt开发入门】如何使用Qt进行绘图——QPainter 绘图

绘图与图表在嵌入式里有的比较多&#xff0c;尤其是图表&#xff0c;我们常在股票里看到的“图表折线/曲线 图/饼状图等”都可以用 Qt 的图表来实现。绘图和图表的内容本章主要介绍绘图和图表的基本操作&#xff0c;以简单的例子呈现绘图与图表的用法&#xff0c;目的就是快速入…
阅读更多...
抖音怎么私信发名片

抖音怎么私信发名片

抖音怎么私信发名片&#xff0c;抖音私信卡片制作教程来了&#xff0c;视频版教程#新媒体运营工具#软件#抖音消息卡片 hello&#xff0c;大家&#xff0c;我是百收网SEO&#xff0c;今天给大家说一下个人号自动回复卡片&#xff0c;相比企业号自动回复卡片&#xff0c;它的优势…
阅读更多...
MATLAB | 终于找到了修改图例图标的方法(可以自己设计图例啦？)

MATLAB | 终于找到了修改图例图标的方法(可以自己设计图例啦？)

讲一点扒MATLAB底裤的事情叭&#xff0c;就是之前写的有一些绘图函数&#xff0c;比如阴影柱状图&#xff0c;想要把图例里的图标进行修改让其也带着阴影&#xff0c;我采取的是直接绘制一些会检测图例框移动的阴影图标来冒充图例的图标&#xff0c;那么有没有办法真正的自定义…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023