Flutter-Padding组件

news2024/11/14 7:54:07

1. 说明        

在html中常见的布局标签都有padding属性,但是Flutter中很多Widget是没有padding属性。这个时候 我们可以用Padding组件处理容器与子元素之间的间距

2. 属性

        padding:padding值, EdgeInsetss设置填充的值

        child:子组件

3. 示例

(1)EdgeInsets方法说明

EdgeInsets.fromLTRB(double left, double top, double right, double bottom):分别指定四个方向,必须填值。

EdgeInsets.all(double value) : 所有方向使用相同数值。

EdgeInsets.only({left, top, right ,bottom }):可以设置具体某个方向(也可以同时指定多个方向)。

EdgeInsets.symmetric({vertical, horizontal}):用于设置对称方向,vertical指top和bottom,horizontal指left和right。

(2)代码示例
import 'package:flutter/material.dart';
import '../../res/listData.dart';
  
void main() {
  runApp(const MyApp());
}
  
class MyApp extends StatelessWidget {
  const MyApp({Key? key})
      : super(key: key); // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text("FLutter App")),
        body: const HomePage(),
      ),
    );
  }
}
  
class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return GridView.count(
      padding: const EdgeInsets.all(10),
      crossAxisCount: 2,
      childAspectRatio: 1,
      children: [
        Padding(
          padding: const EdgeInsets.all(10),
          child: Image.asset('images/1.png', fit: BoxFit.cover),
        ),
        Padding(
          padding: const EdgeInsets.all(10),
          child: Image.asset('images/2.png', fit: BoxFit.cover),
        ),
        Padding(
          padding: const EdgeInsets.all(10),
          child: Image.asset('images/3.png', fit: BoxFit.cover),
        ),
        Padding(
          padding: const EdgeInsets.all(10),
          child: Image.asset('images/4.png', fit: BoxFit.cover),
        ),
        Padding(
          padding: const EdgeInsets.all(10),
          child: Image.asset('images/5.png', fit: BoxFit.cover),
        ),
        Padding(
          padding: const EdgeInsets.all(10),
          child: Image.asset('images/6.png', fit: BoxFit.cover),
        ),
      ],
    );
  }
}

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

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

相关文章

前端常用布局模板39套,纯CSS实现布局

前端常用布局模板39套,纯CSS实现布局 说明 写博客、官网、管理后台都可以参考以下布局模板,实现模板布局的方式包含:flex、CSS、HTML5、Layout。 不需要下载积分,没有特殊库引用,不用安装任何插件,打开资源…

微服务day07

Elasticsearch 需要安装elasticsearch和Kibana,应为Kibana中有一套控制台可以方便的进行操作。 安装elasticsearch 使用docker命令安装: docker run -d \ --name es \-e "ES_JAVA_OPTS-Xms512m -Xmx512m" \ //设置他的运行内存空间&#x…

java常用工具介绍

1. 集成开发环境(IDE): • Eclipse:一个开放源代码的、基于Java的可扩展开发平台。它提供了一个框架和一组服务,用于通过插件组件构建开发环境。Eclipse 还包括用于Java开发的工具(Java Development Tools,…

C++入门基础知识148—【关于C++ 二元运算符重载】

成长路上不孤单😊😊😊😊😊😊 【14后😊///C爱好者😊///持续分享所学😊///如有需要欢迎收藏转发///😊】 今日分享关于C 二元运算符重载的相关内容&#xff01…

黑马智数Day7

获取行车管理计费规则列表 封装接口 export function getRuleListAPI(params) {return request({url: parking/rule/list,params}) } 获取并渲染数据 import { getRuleListAPI } from /apis/carmounted() {this.getRuleList() }methods: {// 获取规则列表async getRuleList(…

NodeJS的安装 npm 配置和使用 Vue-cli安装 Vue项目介绍

一.前端工程化 前端工程化是使用软件工程的方法来单独解决前端的开发流程中模块化、组件化、规范化、自动化的问题,其主要目的为了提高效率和降低成本 1. NodeJS的安装 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环 境,可以使 JavaScript 运行在服务…

Anolis8.2系统中搭建python环境

文章目录 安装依赖项依赖项介绍 下载python源码包安装python源码包 安装依赖项 [rootPython ~]# dnf install -y gcc make zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readline-devel tk-devel gdbm-devel xz-devel libffi-devel uuid-devel libnsl2-d…

51c自动驾驶~合集10

我自己的原文哦~ https://blog.51cto.com/whaosoft/11638131 #端到端任务 说起端到端,每个从业者可能都觉得会是下一代自动驾驶量产方案绕不开的点!特斯拉率先吹响了方案更新的号角,无论是完全端到端,还是专注于planner的模型&a…

基于Python+Django+Vue3+MySQL实现的前后端分类的商场车辆管理系统

项目名称:基于PythonDjangoVue3MySQL实现的前后端分离商场车辆管理系统 技术栈 开发工具:PyCharm、Visual Studio Code (VSCode)运行环境:Python 3.10、MySQL 8.0、Node.js 18技术框架:Django 5、Vue 3.4、Ant-Design-Vue 4.12 …

JAVA后端生成图片滑块验证码 springboot+js完整案例

前言 现在大部分网部都是图片滑块验证码,这个得要与后端联动起来才是确保接口安全性 通过我们系统在发送手机短息时都会选进行滑块验证,但是我们要保证发送短息接口的全安,具体路思如下 那么这个滑块的必须是与后端交互才能保证安全性&…

人工智能大比拼(3)

已知x-,y-6,且下述表达式的值与x的取值无关,求y -10x2y7xy 上述这个很简单的数学题,可是在各家AI之间出现了争议,本期我使用了四个AI:kimi,商量,文心一言,chatyy 先来看一下kimi的表…

SQLI LABS | Less-45 POST-Error Based-String-Stacked-Bilnd

关注这个靶场的其它相关笔记:SQLI LABS —— 靶场笔记合集-CSDN博客 0x01:过关流程 输入下面的链接进入靶场(如果你的地址和我不一样,按照你本地的环境来): http://localhost/sqli-labs/Less-45/ 本关是堆…

sol机器人pump机器人如何实现盈利的?什么是Pump 扫链机器人?

什么是Pump 扫链机器人,它的盈利逻辑优化策略是什么? Pump 扫链机器人,通过智能化、自动化的买卖操作帮助投资者实现快速盈利。在此基础上,我们对该机器人的盈利逻辑进行了深度优化,涵盖了买入策略和止盈策略的各个方面…

MYSQL SQL优化总结【快速理解】

1、优化insert操作 批量插入,防止大量与数据库进行访问 手动控制事务,减少事务的频繁开启和提交。 主键顺序插入 2、优化主键 主键优化的点就是避免主键过长,因为如果有二级索引,叶子节点存储的数据时间上是主键,如果主…

深入计算机语言之C++:String的模拟实现

🔑🔑博客主页:阿客不是客 🍓🍓系列专栏:从C语言到C语言的渐深学习 欢迎来到泊舟小课堂 😘博客制作不易欢迎各位👍点赞⭐收藏➕关注 一、模拟实现 string 库 1.1 string 的成员变量…

植物大战僵尸杂交版v2.6.1最新版本(附下载链接)

B站游戏作者潜艇伟伟迷于11月3日更新了植物大战僵尸杂交版2.6.1版本!!!,有b站账户的记得要给作者三连关注一下呀! 不多废话下载链接放上: 夸克网盘链接:https://pan.quark.cn/s/279e7ed9f878 新…

【Pikachu】目录遍历实战

既然已经决定做一件事,那么除了当初决定做这件事的我之外,没人可以叫我傻瓜。 1.目录遍历漏洞概述 目录遍历漏洞概述 在Web功能的设计过程中,开发者经常会将需要访问的文件作为变量进行定义,以实现前端功能的灵活性。当用户发起…

[ 网络安全介绍 5 ] 为什么要学习网络安全?

🍬 博主介绍 👨‍🎓 博主介绍:大家好,我是 _PowerShell ,很高兴认识大家~ ✨主攻领域:【渗透领域】【数据通信】 【通讯安全】 【web安全】【面试分析】 🎉点赞➕评论➕收藏 养成习…

项目技术栈-解决方案-注册中心

项目技术栈-解决方案-注册中心 Zookeeper、Eureka、Nacos、Consul和Etcd参考文章 服务注册中心(Registry):用于保存 RPC Server 的注册信息,当 RPC Server 节点发生变更时,Registry 会同步变更,RPC Client …

除了 Postman,还有什么好用的 API 测试工具吗

尽管 Postman 提供了团队协作的功能,但是免费版本的功能较为基础,付费版的价格对于小型团队或个人开发者来说可能较高。而且访问 Postman 有时会非常慢,太影响体验了。 鉴于上述局限性,Apifox 成为了一个很好的替代选择。Apifox …