flutter布局-3-center

最新推荐文章于 2024-05-27 23:55:33 发布
最新推荐文章于 2024-05-27 23:55:33 发布
阅读量1.2k 收藏
点赞数
分类专栏： flutter 文章标签： flutter center 布局 widget
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liu__520/article/details/83716685
版权

目录

Center 居中的布局

连载：flutter布局-1-column
连载：flutter布局-2-row

只能有一个chlid，但是可以用container包含好多子child，继承自Align。

用于将其子项与其自身对齐，并根据子级的大小自行调整大小。

如果它的尺寸受到约束且[widthFactor]和[heightFactor]为空，则此窗口小部件将尽可能大。 如果维度不受约束且相应的大小因子为null，则窗口小部件将匹配其在该维度中的子项大小（其实就是子view的宽高就是center容器的宽高）。 如果尺寸因子为非null，则此center容器的相应尺寸将是子view的尺寸和尺寸因子的乘积。 例如，如果widthFactor是2.0，那么此小部件的宽度将始终是其子宽度的两倍，并且将子view居中，来看看下图吧。

1、widthFactor：宽度因子

2、heightFactor:高度因子

mainaxis.png

我是刘成
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flutter：Center（居中布局），Padding（填充布局），Align（对齐布局）
01-08
文章目录Center （居中布局）Padding （填充布局）Align （对齐布局） Center （居中布局） 在Center布局中，子元素处于水平和垂直方向的中间位置。代码如下： void main() => runApp(MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title:
Flutter 基本布局
01-20
在本文中，我们将深入探讨如何使用Flutter来创建和管理页面布局。Flutter是一个强大的跨平台UI工具包，它提供了丰富的组件库，使得开发者可以快速构建美观且高性能的应用程序。以下是一些基本的布局概念和示例。 1....
Flutter中常用的组件-Center
不二菜菜子的博客
01-31 653
Flutter中常用的组件-Center
Flutter 中的 Center 小部件：全面指南
最新发布
smileKH的博客
05-27 719
Center是一个布局小部件，它在水平和/或垂直方向上居中其子组件。它是一个没有视觉表现的容器，其主要作用是调整子组件的位置。
Flutter之Center
weixin_44519342的博客
03-08 413
Flutter之Center
flutter TextField 位置居中，初始值（默认值），内容居中，设置圆角，前后加图标，监控输入值，输入限制，去掉下划线，自动换行等
热门推荐
python4_1的博客
09-01 1万+
flutter TextField位置居中，初始值（默认值），内容居中，设置圆角，前后加图标，监听 ，自动换行等操作
Flutter布局组件之Align
01-20
总之，`Align`组件在Flutter布局中扮演着重要的角色，它简化了子组件的对齐和定位，使得开发者能够快速调整UI元素的位置，而无需深入理解复杂的布局机制。结合`Alignment`类提供的各种常量，可以轻松实现常见的对齐...
Flutter布局组件
02-24
Flutter中的布局容器主要分为两类：只能包含一个子Widget的布局容器和可以包含多个子Widget的容器，下面分别说明其用法。Center组件中的子组件会居中显示。Center组件会尽可能的大，如果你不给它设置任何约束。下面...
Flutter样式和布局控件简析
03-01
搞前端的同学可能都习惯了CSS局部的思维，过去也出现过一些跟布局或者样式相关的标签，例如：big,center,font,s,strike,tt,u；但是目前也被CSS所代替，已经不推荐使用。但是在Flutter里面，是没有CSS这样一个概念的...
Flutter使组件居于屏幕中间
XinBaDeRongYao的博客
04-10 2827
以上是几种常见的将组件居于屏幕中间的方式，具体使用哪种方式要根据实际情况来决定。5. 使用 Stack 和 Positioned 组件将子组件居中。4. 使用 SizedBox 组件指定子组件的宽高，将其居中。2. 使用 Align 组件指定子组件的对齐方式，将其居中。3. 使用 Column 或 Row 组件将子组件居中。1. 使用 Center 组件将子组件居中。
flutter demo （一）：居中的按钮
weixin_33714884的博客
08-09 336
效果图： 代码如下： import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends StatefulWidget { @override TestMyAppState createState() => new TestMyAppState(); }...
Flutter Center使用方法
野猿新一
10-30 3232
二话不说直接上代码 直接把要居中的控件放在Center内即可 class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: ...
Flutter - 基础布局
GitLqr的博客
04-28 771
欢迎关注微信公众号：FSA全栈行动 ???? 一、单子布局 Widget 单子布局, 顾名思义就是只能包含一个子控件的 widget 1、Align(Center) Center 可以将子控件居中显示, 默认会尽可能拉伸填满父控件: class CenterDemo extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: Icon(Icons.p
FractionallySizedBox 按比例设置Widget的尺寸
卓原的进化之旅
08-22 1371
FractionallySizedBox 按比例设置Widget的尺寸 有时候,应用的设计是按比例给出的,例如这样 : 按钮应该占应用宽度的70% 这时可以使用FractionallySizedBox来实现. 构造方法 const FractionallySizedBox({ Key key, this.alignment = Alignment.center, this.widthFactor, this.heightFactor, Widget child, }) 我们先看一下
【Flutter学习】页面布局之基础布局组件
大灰狼的小绵羊哥哥的博客
08-08 1082
梁飞宇 【Flutter学习】页面布局之基础布局组件 一，概述　　 　　Flutter中拥有30多种预定义的布局widget，常用的有Container、Padding、Center、Flex、Row、Colum、ListView、GridView。按照《Flutter技术入门与实战》上面来说的话，大概分为四类 基础布局组件：Container(容器布局)，Center(居中布局)，...
全网最详细的一篇Flutter 尺寸限制类容器总结
老孟Flutter
03-05 5505
Flutter中尺寸限制类容器组件包括ConstrainedBox、UnconstrainedBox、SizedBox、AspectRatio、FractionallySizedBox、LimitedBox、Container。这些组件可以约束子组件的尺寸，下面一一介绍。 ConstrainedBox ConstrainedBox组件约束子组件的最大宽高和最小宽高，假如一个组件宽高都是300，...
Flutter-单个布局的组件（Align、Center、Padding、Container）
Alangao的博客
08-03 446
为实现界面各种布局的样式，采用很多组件的组合形成一个复杂的布局。说到flutter的离不开Widget，flutter的=布局也是使用Widget来完成的。 1.Align组件 先看一下Align的源码： const Align({ Key key, this.alignment: Alignment.center, this.widthFactor, this.heightFactor, Widget child }) alignment：对齐方式，默认居中对齐 widthFa
flutter界面布局
05-20
Flutter 的界面布局采用的是 Widget 树来描述页面。Flutter 中有许多内置的 Widget，例如：Container、Row、Column、Stack 等，这些 Widget 可以用来构建各种复杂的界面布局。 下面是一个简单的例子，展示如何使用 Row 和 Column 来实现页面布局： ```dart import 'package:flutter/material.dart'; class MyHomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Flutter Demo'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( 'Hello, World!', style: TextStyle(fontSize: 24.0), ), SizedBox(height: 24.0), RaisedButton( onPressed: () { // TODO: Add button logic here }, child: Text('Press Me'), ), ], ), ), ); } } ``` 在这个例子中，我们使用了 Scaffold Widget 来创建一个基础的页面框架。在 body 中，我们使用了 Center Widget 来把 Column Widget 居中显示。在 Column Widget 中，我们添加了两个子 Widget：一个是 Text Widget，用来显示文本；另一个是 RaisedButton Widget，用来创建一个按钮。 我们还使用了 mainAxisAlignment 属性来指定子 Widget 的垂直对齐方式。在这个例子中，我们将子 Widget 居中对齐。我们也可以使用 crossAxisAlignment 属性来指定子 Widget 的水平对齐方式。 当然，这只是一个简单的例子。在实际开发中，我们会使用更多的 Widget 和属性来创建不同的界面布局。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值