flutter边距,flutter 百分比宽度

Flutter组件ListTile 使用说明

ListTile 通常用于在 Flutter 中填充 ListView。在这篇文章中，我将用可视化的例子来说明所有的参数。

title 参数可以接受任何小部件，但通常是文本小部件

副标题是标题下面较小的文本

使文本更小，并将所有内容打包在一起

将图像或图标添加到列表的开头。这通常是一个图标。

设置拖尾将在列表的末尾放置一个图像。这对于指示主-细节布局特别有用。

设置内容边距，默认是 16，但我们在这里设置为 0

如果选中列表的 item 项，那么文本和图标的颜色将成为主题的主颜色。

ListTile 可以检测用户的点击和长按事件，onTap 为单击，onLongPress 为长按。对于波纹效果是内置的

通过将 enable 设置为 false，来禁止点击事件

静态方法 divideTiles 可以在 titles 之间添加分隔符，这个颜色有点淡，需要看仔细点才能看出来，哈哈哈哈

相关问答

Q1: Flutter 组件样式

在 Flutter 中的组件样式，都是通过组件上的 style 属性进行设置的，这与 React Native 很类似。

例如，在 Text 组件里设置样式。

与 React Native 不同的是，有一些样式不不能在 style 里面设置的。例如 width，height，color 等属性。因为 Flutter 认为这样应该是组件的属性而不是样式。

边距只要是 padding（内边距） 和 margin（外边距）两个设置。边距只适用于 Container。

如果要使用绝对定位，那么需要把内容包裹在 Positioned 容器里，而 Positioned 又需要包裹在 Stack 容器里。

容器的边框设置，使用 Border 对象。边框只适用于 Container。

要设置容器的圆角，使用 BorderRadius 对象，它只能使用于 Container。

BorderRadius 有以下的属性与方法。

在 Flutter 里设置阴影效果，需要使用 BoxShadow 对象。阴影效果只适用于 Container。

等效于 css 上的阴影效果设置。

Q2: Android原生和Flutter使用过程的差异对比（二）

1、常用布局的对比

使用下来其他组件大致还算方便，但是相对布局而言使用便利程度上Android原生完胜，ConstraintLayout内部的所有子View可以设置互相之间的位置依赖关系。

而Flutter的Stack组件内部的Children只能通过外层包裹 Align后 固定位置，比如 Alignment.topLeft、Alignment.bottomRight 等。遇到复杂的堆叠布局需要通过外层包裹 Positioned 组件后设置固定的 top 和 left 距离以达到效果，内部子组件之间无法设置位置关联关系。

2、一些常用属性设置上的差异：

Margin外边距

Android：直接在布局文件对View设置android:layout_marginStart、android:layout_marginTop

Flutter：需嵌套 Container 组件并在内部设置具体的 margin 值

Padding内边距

Android：TextView、ImageView、各种Layout都可以直接在属性上设置android:paddingStart

Flutter：需嵌套 Padding 组件并在内部设置具体的值

组件的可见性

Android：每个view都可以通过setVisibility来设置可见、隐藏或者隐藏但占位

Flutter：没有单独设置组件是否显示的api，只能通过 bool 值控制是否添加该组件

事件监听

Android：常规的setOnClickListener和setOnLongClickListener设置单击和长按事件

Flutter：在需要添加事件监听的组件外层嵌套 InkWell 或 GestureDetector 并设置 onTap 等

3、生命周期

Android：

Activity和Fragment各自有完整的生命周期链路onCreate、onStart、onResume、onPause、onDestroy等

Flutter：

万物皆组件，组件继承 WidgetsBindingObserver 并重写 didChangeAppLifecycleState 函数进行监听

退回桌面依次执行inactive 》= paused，此时界面不可见用户不可操作，从桌面重新进入app执行resumed，状态较少如需在某些条件下触发特定操作可能要找别的方案，比如发通知之类的

Q3: Flutter 布局 - Container详解

Container的组成如下：

- width  和  height ：宽和高。

- color ：背景色，值为一个 Color 对象，不能与 decoration 属性同时设置。

-  margin ：外边距，值为一个 EdgeInsets 对象。EdgeInsets 对象即可调用EdgeInsets.all() 方法统一设置左上右下四条边的边距，也可以调用 EdgeInsets.fromLTRB() 分别设置左上右下四条边的边距。

-  padding ：内间距，值同 margin。

-  alignment ：元素对齐方式

-  decoration ：装饰、背景颜色、边框、背景图片、等，不能与 color 属性同时设置

-  child ：子组件

-参数 alignment：

topCenter ：顶部居中对齐     topLeft ：顶部左对齐      topRight ：顶部右对齐      center ：水平垂直居中对齐      centerLeft ：垂直居中水平居左对齐      centerRight ：垂直居中水平居右对齐      bottomCenter 底部居中对齐     bottomLeft ：底部居左对齐     bottomRight ：底部居右对齐

-参数 decoration ：

 Container参数的使用如下：

Q4: Flutter基础篇——常用Widget

对于初学flutter的朋友来说，要知道，flutter的UI万物皆Widget。

flutter所写的页面的结构可以被看成套娃，一层套一层，一层套一层，一层套一层。。。。。。

Flutter Widget采用现代响应式框架构建，这是从 React 中获得的灵感，中心思想是用widget构建你的UI。 Widget描述了他们的视图在给定其当前配置和状态时应该看起来像什么。当widget的状态发生变化时，widget会重新构建UI，Flutter会对比前后变化的不同， 以确定底层渲染树从一个状态转换到下一个状态所需的最小更改。

Text ： 该 widget 可让创建一个带格式的文本。

Row 、 Column ： 这些具有弹性空间的布局类Widget可让您在水平（ Row ）和垂直（ Column ）方向上创建灵活的布局。

Stack ：取代线性布局 (和Android中的LinearLayout相似)，Stack允许子 widget 堆叠， 你可以使用 Positioned 来定位他们相对于 Stack 的上下左右四条边的位置。

Container ： Container 可让您创建矩形视觉元素。 您可以为 Container 装饰一个 BoxDecoration , 如 background、一个边框、或者一个阴影。 Container 也可以具有边距（margins）、填充(padding)和应用于其大小的约束(constraints)。另外， Container 可以使用矩阵在三维空间中对其进行变换。

具体的演示见我另外的博客

有一部分Widget都有一个 child 属性，用于容纳唯一的子Widget。

例如：Container、Center、Padding、Align等Widget。

还有一部分Widget允许存在多个子Widget，用 children 作为属性。

例如：Row、Column、Stack等Widget。

在StatefulWidget调用createState之后，框架将新的状态插入树种，然后调用状态对象的initState。子类化State可以重写initState，以完成仅需要一次执行的工作。当然在initState的实现中需要调用super.initState

当一个状态对象不再需要时，框架调用状态对象的dispose。也可以通过覆盖dispose方法来执行清理工作。

OVER~