flutter 容器Padding、DecoratedBox、Transform、RotatedBox、Container、Clip、FittedBox、Scaffold

已于 2022-02-28 10:58:53 修改
阅读量1.3k 收藏 1
点赞数
文章标签： flutter 容器 android
于 2022-02-15 17:54:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30005223/article/details/122939093
版权

1.Padding给其子节点添加边距类似于Android Layout布局里面的padding属性。

 	Padding(
         padding: EdgeInsets.all(20),
                child: Text(
                  'padding1',
                  style: TextStyle(fontSize: 20,color: Colors.red),
                ),
              ),
              Padding(
                padding: EdgeInsets.all(5),
                child: Text(
                  'padding2',
                  style: TextStyle(fontSize: 20,color: Colors.blueAccent),
                ),
              ),
              Padding(
                padding: EdgeInsets.only(left: 100,top: 100),
                child: Text(
                  'padding3',
                  style: TextStyle(fontSize: 20,color: Colors.purple),
                ),
              )

在这里插入图片描述

2.DecoratedBox可以在其子组件绘制前(或后)绘制一些装饰（Decoration），如背景、边框、渐变等。

  DecoratedBox(
                //设置装饰位置（DecorationPosition.foreground）前景，（DecorationPosition.background）背景
                position: DecorationPosition.background,
                //设置装饰
                decoration: BoxDecoration(
                    //单色
                    color: Colors.red,
                    //颜色渐变
                    gradient: LinearGradient(
                        colors: [Colors.red, Colors.orange.shade700]),
                    //图片
                    image: const DecorationImage(
                        image: NetworkImage(
                            'https://tse1.mm.bing.net/th/id/OET.1ffb291d38a046a6921fd6559c91b06d?w=272&h=135&c=7&rs=1&o=5&dpr=2&pid=1.9')),
                    // //背景混合模式
                    // backgroundBlendMode:BlendMode.dstOut,
                    //边框
                    // border: Border(left:BorderSide(color:Colors.teal,width: 10) ),
                    border: Border.all(color: Colors.teal, width: 5),
                    //圆角
                    borderRadius: BorderRadius.circular(10),
                    //阴影
                    boxShadow: const [
                      BoxShadow(
                          color: Colors.black54,
                          offset: Offset(10.0, 10.0),
                          blurRadius: 4.0)
                    ],
                    //装饰形状，如果是BoxShape.circle就不能设置圆角borderRadius参数
                    shape: BoxShape.rectangle),

                child: const Padding(
                  padding: EdgeInsets.all(40),
                  child: Text(
                    'DecoratedBox',
                    style: TextStyle(color: Colors.yellow, fontSize: 40),
                  ),
                ),
              )

在这里插入图片描述

3.Transform子组件绘制时对其应用一些矩阵变换来实现一些特效。Matrix4是一个4D矩阵，通过它我们可以实现各种矩阵操作

  Container(
                color: Colors.red,
                child: Transform(
                  alignment: Alignment.centerRight,
                  transform: Matrix4.skewY(0.2),
                  child: const Text(
                    'Transform倾斜',
                    style: TextStyle(fontSize: 40),
                  ),
                ),
              ),
              const SizedBox(
                height: 40,
              ),
              Transform.rotate(
                  angle: 0.3,
                  child: const Text(
                    'Transform旋转',
                    style: TextStyle(fontSize: 20),
                  )),
              const SizedBox(
                height: 40,
              ),
              Container(
                color: Colors.blueAccent,
                child: Transform.translate(
                  offset: const Offset(10, 10),
                  child: const Text(
                    'Transform平移',
                    style: TextStyle(fontSize: 20),
                  ),
                ),
              ),
              const SizedBox(
                height: 40,
              ),
              Container(
                color: Colors.yellow,
                child: Transform.scale(
                  scale: 0.7,
                  child: const Text(
                    'Transform缩放',
                    style: TextStyle(fontSize: 20),
                  ),
                ),
              )

在这里插入图片描述

4.Container可以定制装饰子控件的容器背景，边距，间距，渐变，阴影…

Container(
                margin:  EdgeInsets.only(top: 10.0, left: 40.0),
                constraints: BoxConstraints.tightFor(width: 100.0, height: 100.0),//卡片大小
                decoration: BoxDecoration(  //背景装饰
                  gradient: RadialGradient( //背景径向渐变
                    colors: [Colors.lightGreenAccent, Colors.yellow],
                    center: Alignment.topLeft,
                    radius: .98,
                  ),
                  boxShadow: [
                    //卡片阴影
                    BoxShadow(
                      color: Colors.black54,
                      offset: Offset(2.0, 2.0),
                      blurRadius: 4.0,
                    )
                  ],
                  //圆角
                 borderRadius: BorderRadius.all(
                                Radius.circular(4.0),
                              )
                ),
                transform: Matrix4.rotationZ(.1),//卡片倾斜变换
                alignment: Alignment.center, //卡片内文字居中
                child: Text(
                  //卡片文字
                  "8899", style: TextStyle(color: Colors.white, fontSize: 40.0),
                ),
              )

在这里插入图片描述

5.Clip裁剪子控件

  • ClipOval 子组件为正方形时剪裁成内贴圆形；为矩形时，剪裁成内贴椭圆
  • ClipRRect 将子组件剪裁为圆角矩形
  • ClipRect 默认剪裁掉子组件布局空间之外的绘制内容（溢出部分剪裁）
  • ClipPath 按照自定义的路径剪裁
class _ClipWidget extends StatelessWidget {
  final Image photo = Image.network(
    'https://tse1.mm.bing.net/th/id/OET.5272002b31e349ca8b7f061d2d17466f?w=135&h=272&c=7&rs=1&o=5&dpr=2&pid=1.9',
    height: 100,
    width: 100,
    fit: BoxFit.cover,
  );

  @override
  Widget build(BuildContext context) => MaterialApp(
        home: Scaffold(
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                photo,
                const SizedBox(
                  height: 20,
                ),
                ClipOval(
                  child: photo,
                ),
                const SizedBox(
                  height: 20,
                ),
                ClipRRect(
                  child: photo,
                  borderRadius: const BorderRadius.all(Radius.circular(20)),
                ),
                const SizedBox(
                  height: 20,
                ),
                Container(
                  color: Colors.yellow,
                  width: 120,
                  child: Row(
                    children: [
                      Align(
                        alignment: Alignment.centerRight,
                        widthFactor: .5,
                        child: ClipRect(
                          child: photo,
                        ),
                      ),
                      const Text('我是文本')
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      );
}

在这里插入图片描述

6.FittedBox对其子控件缩放布局

const FittedBox({
  Key? key,
  this.fit = BoxFit.contain, // 适配方式
  this.alignment = Alignment.center, //对齐方式
  this.clipBehavior = Clip.none, //是否剪裁
  Widget? child,
})
  • BoxFit.none ：不做任何填充
  • BoxFit.fill：不按宽高比例填充，内容不会超过容器范围
  • BoxFit.contain：按照宽高比等比模式填充，内容不会超过容器范围
  • BoxFit.cover：按照原始尺寸填充整个容器模式。内容可能回超过容器范围
  • BoxFit.scaleDown：会根据情况缩小范围
class _FittedBoxWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) => MaterialApp(
        home: Scaffold(
          body: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                color: Colors.teal,
                width: 200,
                height: 60,

                child: FittedBox(
                  fit: BoxFit.none,
                  child: Padding(
                    padding: const EdgeInsets.symmetric(vertical: 30.0),
                    child: Row(
                        children: [Text('BoxFit.none,' * 10)]), //文本长度超出 Row 的最大宽度会溢出
                  ),
                ),
              ),
              Container(
                width: 200,
                color: Colors.lightGreenAccent,
                height: 60,
                child: FittedBox(
                  fit: BoxFit.fill,
                  alignment: Alignment.topLeft,
                  child: Padding(
                    padding: const EdgeInsets.symmetric(vertical: 30.0),
                    child: Row(
                        children: const [Text('BoxFit.fill,')]), //文本长度超出 Row 的最大宽度会溢出
                  ),
                ),
              ),
              Container(
                width: 200,
                color: Colors.yellow,
                height: 60,
                child: FittedBox(
                  fit: BoxFit.contain,
                  alignment: Alignment.topLeft,
                  child: Padding(
                    padding: const EdgeInsets.symmetric(vertical: 30.0),
                    child: Row(
                        children: const [Text('BoxFit.contain,')]), //文本长度超出 Row 的最大宽度会溢出
                  ),
                ),
              ),
              Container(
                width: 200,
                color: Colors.red,
                height: 60,
                child: FittedBox(
                  fit: BoxFit.cover,
                  alignment: Alignment.topLeft,
                  child: Padding(
                    padding: const EdgeInsets.symmetric(vertical: 30.0),
                    child: Row(
                        children: const [Text('BoxFit.cover,')]), //文本长度超出 Row 的最大宽度会溢出
                  ),
                ),
              ),
              const SizedBox(height: 100,),
              Container(
                width: 200,
                color: Colors.blue,
                height: 60,
                child: FittedBox(
                  fit: BoxFit.scaleDown,
                  alignment: Alignment.topLeft,
                  child: Padding(
                    padding: const EdgeInsets.symmetric(vertical: 30.0),
                    child: Row(
                        children: const [Text('BoxFit.scaleDown,BoxFit.scaleDown,BoxFit.scaleDown,BoxFit.scaleDown,')]), //文本长度超出 Row 的最大宽度会溢出
                  ),
                ),
              ),
            ],
          ),
        ),
      );
}

在这里插入图片描述

7.Scaffold支持页面标题，侧边栏，底部导航，浮动按钮…

class _ScaffoldWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) => MaterialApp(
        home: Scaffold(
            appBar: AppBar(
              title: const Text('头部标题'),
              centerTitle: true,
            ),
            body: const Text("body"),
            floatingActionButton: ElevatedButton(
              child: const Text('我是浮动按钮'),
              onPressed: () {},
            ),
            drawer: Drawer(
              child: Container(
                alignment: Alignment.center,
                child: const Text('这个是侧边栏'),
                color: Colors.blue,
              ),
            ),
            bottomNavigationBar: BottomNavigationBar(
              type: BottomNavigationBarType.fixed,
              items: const [
                BottomNavigationBarItem(
                    icon: Icon(Icons.home),
                    label: '首页',
                    backgroundColor: Colors.blue),
                BottomNavigationBarItem(
                    icon: Icon(Icons.category), label: '分类'),
                BottomNavigationBarItem(
                    icon: Icon(Icons.shopping_cart), label: '购物车'),
                BottomNavigationBarItem(icon: Icon(Icons.person), label: '我的')
              ],
            )),
      );
}

在这里插入图片描述

Good Weking
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
flutter Container容器实现圆角边框
08-25
主要为大家详细介绍了flutter Container容器实现圆角边框，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Flutter 常用的单个子控件的容器 Container Padding Center Align FittedBox AspectRatio ConstrainedBox
老孟Flutter
12-06 2110
文章目录1、Container 1、Container
1、Flutter Widgets 之 Container
wywinstonwy的专栏
12-22 2631
Container将会是我们以后最常用的控件之一，Container是单容器类控件，即只包含一个子控件。Container可以装饰和定位子控件，例如设置背景颜色、形状等。 名称 功能 alignment topCenter：顶部居中对齐 topLeft：顶部左对齐 topRight：顶部右对齐 center：水平垂直居中对齐 centerLeft：垂直居中水平居左对齐 centerRight：垂直居中水平居右对齐
Flutter容器类Widget使用----Padding、DecoratedBox和ConstrainedBox
洪伟的专栏
03-12 521
容器顾名思义是可以容纳其他 Widget 的，这一节我们学习Padding、DecoratedBox和ConstrainedBox。 一、Padding 在 Android 开发中我们给控件会设置内边距和外边距，也就是 padding 和 margin，当然父控件如果设置了 padding 实际上对子控件也会造成影响。Flutter 中 Padding 可以给其子节点添加填充。 const P...
Flutter组件学习（15）常用容器类组件
小小苏的小小苏
06-10 367
Padding EdgeInsets 我们看看EdgeInsets提供的便捷方法： fromLTRB(double left, double top, double right, double bottom)：分别指定四个方向的填充。 all(double value): 所有方向均使用相同数值的填充。 only({left, top, right ,bottom })：可以设置具体某个方向的填充(可以同时指定多个方向)。 symmetric({ vertical, horizontal }.
Flutter Container解析
weixin_37630479的博客
05-01 1940
Container是在实际开发中经常用到的小部件，Container里组合了各种小部件，让我们开发更加便捷，来看一下的Container都有哪些属性. Container({ Key? key, this.alignment, this.padding, this.color, this.decoration, this.foregroundDecoration, double? width, double? height, B
Flutter UI基础 - DecoratedBox组件
迦南的专栏
07-30 858
DecoratedBox 可以给child增加显示效果，如颜色，阴影，边框等 const DecoratedBox({ Key key, @required this.decoration,//具体添加的效果 this.position = DecorationPosition.background,//效果是放在背景还是前景，前景会覆盖child Widget child, }) BoxDecoration 具体装饰 const BoxDecoration
Flutter-Container详解
qq_34202054的博客
04-25 8173
Flutter-Container详解
Flutter控件——容器控件：变换Transform
wzj_what_why_how的博客
06-16 469
变换容器：Transform
Flutter Container Widget 布局详解
weixin_34279061的博客
09-19 214
在Flutter中，号称一切皆widget，手势是Widget，动画是Widget，UI更是Widget，今天我们就来说说Widgets里比较特殊的一个，Container。 1. 参考文献 Container初用起来很简单，但是里面的逻辑又有些复杂，我也不敢说完全吃透，所以本文初期版本还是以总结网上各种文章为主，再加上自己的理解，如果有不对的地方，请一定指出 Flutter快速上车之Widget...
flutter监听滚动以及去除padding
01-20
flutter监听滚动以及去除padding 需求：需要将搜索框固定在页面上，然后监听下拉的距离，搜索框由透明完全显示 1.移除padding： MediaQuery.removePadding( removeTop: true, // 这个参数是必须的 removeBottom ...
Flutter实现容器组件、图片组件 的代码
08-25
容器组件（Container）可以理解为在Android中的RelativeLayout或LinearLayout等，在其中你可以放置你想布局的元素控件，从而形成最终你想要的页面布局。这篇文章主要介绍了Flutter实现容器组件、图片组件 的代码,...
Flutter 组件之Padding、Row、 column、Expanded、Stack层叠 组件
June.1
03-17 611
入口文件 import 'package:flutter/material.dart'; void main() { runApp(HomeComponent()); } class HomeComponent extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: ...
Flutter - Padding
a136447572的专栏
12-10 457
Padding可以给其子节点添加填充（留白），和边距效果类似 在定义中,必需传一个 padding 的规则 在 使用 EdgeInsetsGeometry 时 我们通常会使用 他的子类 EdgeIns
Flutter入门-布局Container、Padding、Align、Center
小天空的博客
06-25 1304
Flutter入门-布局Container、Padding、Align、Center Container Container的尺寸大小 Container自身尺寸变化的两种情况，以下两种情况皆不考虑父节点设置constraints和Container自身设置的width、height： 第一种是Container没有子节点的情况下，Container会将自己变得极小，这里我们只要考虑到存在这个Container，但不显示 第二种是Container有子节点的情况下，Container的大小会随着子节点的大
Flutter 基础篇（十六）—— 内边距
一个写代码的废物
10-17 2308
内边距 与 CSS 一致，Flutter 都是使用 Padding 来表示元素的内边距。定义： Padding({ ... EdgeInsetsGeometry padding, Widget child, }) EdgeInsetsGeometry 是一个抽象类，在实际应用中，使用的是 EdgeInsets 类来表示 padding。 EdgeInsets 在 Flutter 中，...
matlab edgepadding,Flutter 布局练习之Padding
weixin_30616309的博客
03-17 167
import'package:flutter/material.dart';voidmain(){runApp(MyApp());}classMyAppextendsStatelessWidget{@overrideWidgetbuild(BuildContextcontext){//TODO:implementbuildreturnMaterialApp(title:"...
Flutter Clipboard实现复制功能
最新发布
菜鸟博客
05-10 68
Flutter Clipboard
flutter container padding
05-24
在Flutter中，Container是一个常用的布局组件，它可以包含一个子组件，并且可以对子组件进行一些常见的布局操作。其中，padding是Container的一个重要属性，可以用来设置内边距。 Padding是指Container内部边界与其...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值