Container容器组件

代码


import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: const Text("这是导航栏")),
        body: const Column(children: [  //引入多个主键
          myBody(),
          MyButton()
        ],))
  ));
}
// ignore: camel_case_types
class myBody extends StatelessWidget {
  const myBody({super.key});   @override
  Widget build(BuildContext context) {
    return Center(
        child: Container(
      // alignment: Alignment.center, //配置Container内容器的方位
      alignment: Alignment.center, //配置Container内容器的方位
      width: 200,
      height: 200,
      // transform: Matrix4.translationValues(40, 0, 0), //位移
      // transform: Matrix4.rotationZ(0.2), //旋转
      //  transform: Matrix4.skewX(0.2), //倾斜
      margin:  const EdgeInsets.all(20.0),
      decoration: BoxDecoration(
        color: const Color.fromARGB(255, 13, 212, 103), //背景颜色
        border: Border.all(
            //边框
            color: Colors.red, //边框颜色
            width: 2.0),
        borderRadius: BorderRadius.circular(40), //圆角
        boxShadow: const [
          //配置阴影效果
          BoxShadow(
            color: Color.fromARGB(255, 236, 130, 8),
            offset: Offset(10.0, 10.0), //在 Flutter 中,Offset 是一个简单的二维坐标点
            blurRadius: 100.0, //阴影范围
          )
        ],
        gradient: const LinearGradient( // LinearGradient 背景线性渐变 RadialGradient径向渐变
          colors: [Color.fromARGB(255, 186, 192, 104), Color.fromARGB(255, 116, 240, 213)]),
      ),       child: const Text("这是  内容",
          style: TextStyle(color: Colors.red, fontSize: 20.0)),
    ));
  }
} //按扭
class MyButton extends StatelessWidget {
  const MyButton({super.key});   @override
  Widget build(BuildContext context) {
    return Container(
      width: 240,
      height: 60,
      alignment:Alignment.center,
      // margin:  const EdgeInsets.all(20.0),  //所有的外边距
      margin:  const EdgeInsets.fromLTRB(20, 40, 20, 30), //四周的外边距
      decoration:  BoxDecoration( color: const Color.fromARGB(255, 99, 193, 221),
      borderRadius: BorderRadius.circular(20)),  //圆角
      child: const Text("按钮",style: TextStyle(
        color: Color.fromARGB(255, 9, 1, 31),
        fontSize: 20,
       ),),
    );
  }
}

padding 和maring
padding 是让容器和里面的元素有相应的间距,margin是让容器和容器外部的其他容器有相应的间距

Container(
margin: EdgeInsets.all(20.0), //容器外补白
color: Colors.orange,
child: Text("Hello world!"),
),
Container(
padding: EdgeInsets.all(20.0), //容器内补白
color: Colors.orange,
child: Text("Hello world!"),
),

3、Container容器组件的更多相关文章

  1. Flutter Container容器组件、Text文本组件详解

    import 'package:flutter/material.dart'; void main(){ runApp(MyApp()); } class MyApp extends Stateles ...

  2. 【Flutter】容器类组件之Container容器

    前言 Container是一个组合类容器,它本身不对应具体的RenderObject,它是DecoratedBox.ConstrainedBox.Transform.Padding.Align等组件组 ...

  3. 展示组件(Presentational component)和容器组件(Container component)之间有何不同

    展示组件关心组件看起来是什么.展示专门通过 props 接受数据和回调,并且几乎不会有自身的状态,但当展示组件拥有自身的状态时,通常也只关心 UI 状态而不是数据的状态.(子组件)容器组件则更关心组件 ...

  4. Castle IOC容器组件生命周期管理

    主要内容 1.生命处理方式 2.自定义生命处理方式 3.生命周期处理 一.生命处理方式 我们通常创建一个组件的实例使用new关键字,这样每次创建出来的都是一个新的实例,如果想要组件只有一个实例,我们会 ...

  5. React 之容器组件和展示组件相分离解密

    Redux 的 React 绑定库包含了 容器组件和展示组件相分离 的开发思想.明智的做法是只在最顶层组件(如路由操作)里使用 Redux.其余内部组件仅仅是展示性的,所有数据都通过 props 传入 ...

  6. Qt容器组件(二)之QWidgetStack、QMdiArea、QDockWidget

    QT中有九种容器组件,分别是组合框QGroupBox.滚动区QScrollArea.工具箱QToolBox.选项卡QTabWidget.控件栈QWidgetStack.框架QFrame.组件QWidg ...

  7. Qt容器组件(一)之QGroupBox、QScrollArea、QToolBox、QTabWidget

    QT中有九种容器组件,分别是组合框QGroupBox.滚动区QScrollArea.工具箱QToolBox.选项卡QTabWidget.控件栈QWidgetStack.框架QFrame.组件QWidg ...

  8. React容器组件和展示组件

    Presentational and Container Components   展示组件   - 只关心它们的样子.   - 可能同时包含子级容器组件和展示组件,一般含DOM标签和自定的样式.   ...

  9. Flutter学习笔记(10)--容器组件、图片组件

    如需转载,请注明出处:Flutter学习笔记(10)--容器组件.图片组件 上一篇Flutter学习笔记(9)--组件Widget我们说到了在Flutter中一个非常重要的理念"一切皆为组件 ...

  10. React-UI组件和容器组件

    UI组件负责页面的渲染,又叫傻瓜组件. 容器组件负责逻辑,又叫聪明组件. 当一个组件只有render函数的时候,就可以用无状态组件的形式来定义这个组件.无状态组件怎么定义呢?其实就是一个函数,接受pr ...

随机推荐

  1. Travelling Salesman and Special Numbers

    prologue 模拟赛的一道题,结果没做出来,丢大人,败大兴.所以过来糊一篇题解. analysis 我们看到数据范围这么大,那么肯定不可以一个一个遍历(废话),所以就要考虑这个题目的性质. 我们先 ...

  2. CSP初赛知识点

    初赛知识点 计算机基础知识 1946年,世界上第一台计算机 ENIAC(埃尼阿克)在美国宾夕法尼亚大学诞生. 冯·诺依曼:计算机之父,提出了计算机体系结构(冯·诺依曼架构) 运算器 控制器 存储器:存 ...

  3. 【vulnhub】——DC-9靶机

    [vulnhub]--DC-9靶机 1. 主机发现 扫描kali主机C段(Kali和DC-9主机在同一个网关下): 发现主机为192.168.108.146,进行详细端口扫描: 可以看到靶机开了一个s ...

  4. 自定义MyBatis拦截器更改表名

    by emanjusaka from ​ https://www.emanjusaka.top/archives/10 彼岸花开可奈何 本文欢迎分享与聚合,全文转载请留下原文地址. 自定义MyBati ...

  5. facebook广告投放优化师

    由来(一个技术的自嗨) 你以为我是个广告优化师?错,我是个java开发从事者.一开始我是想介绍某人转行去做广告投放优化师的,毕竟自己也在某出海公司待过一段时间,对于技术来说出海的核心是支付系统业务和广 ...

  6. Python 在PDF中生成水印

    前言 在PDF中插入水印是比较常用的一种功能.一般在生成比较重要的,或者需要注明版权.作者的文档时使用比较多. 这里我将分享一个通过python代码为PDF文档添加水印的办法(包括文本水印和图像水印) ...

  7. AcWing 190. 字串变换

    原题连接:AcWing 190. 字串变换 题意: 已知有两个字串 \(A, B\) 及一组字串变换的规则(至多 \(6\) 个规则): \(A_1→B_1\) \(A_2→B_2\) \(-\) 规 ...

  8. 嵌入式linux主机通过分区镜像生成固件,DD备份分区后打包成固件,px30刷机教程 ,rockchip刷机教程

    我这边有一个工控路由器因为刷机变砖了,网上下载不到固件,自己暂时还没有搞过编译.我找到了同型号的路由器,把它的系统制作成镜像. 具体操作分为三步: 第一步,直接用DD命令备份了几个分区,分区我暂时还不 ...

  9. cmake的单目录和多目录的使用(Linux和Windows)

    Windows上的使用是用VS2022创建一个cmake项目 然后就可以自动生成CMakeLists.txt和对应的cpp和头文件,其中CMakeLists.txt是最关键的,后面那两个没有也行,自己 ...

  10. C++ Qt开发:使用关联容器类

    当我们谈论编程中的数据结构时,顺序容器是不可忽视的一个重要概念.顺序容器是一种能够按照元素添加的顺序来存储和检索数据的数据结构.它们提供了简单而直观的方式来组织和管理数据,为程序员提供了灵活性和性能的 ...