码迷,mamicode.com
首页 > 其他好文 > 详细

Flutter的布局方法

时间:2019-07-04 11:10:56      阅读:105      评论:0      收藏:0      [点我收藏+]

标签:widgets   world   教程   examples   fit   debugging   set   center   标签   

重点是什么?

  • Widgets 是用于构建UI的类.
  • Widgets 用于布局和UI元素.
  • 通过简单的widget来构建复杂的widget

Flutter布局机制的核心就是widget。在Flutter中,几乎所有东西都是一个widget - 甚至布局模型都是widget。您在Flutter应用中看到的图像、图标和文本都是widget。 甚至你看不到的东西也是widget,例如行(row)、列(column)以及用来排列、约束和对齐这些可见widget的网格(grid)。

您可以通过构建widget来构建更复杂的widget。例如,下面左边的屏幕截图显示了3个图标,每个图标下有一个标签:

技术图片      技术图片

第二个屏幕截图显示布局结构,显示一个行包含3列,其中每列包含一个图标和一个标签。

注意: 本教程中的大多数屏幕截图都是在debugPaintSizeEnabled为true时显示的,因此您可以看到布局结构。 有关更多信息,请参阅可视化调试,这是调试 Flutter Apps中的一节。

 

以下是此UI的widget树示意图:

技术图片

大部分应该看起来应该像您所期望的,但你可能想了解一下Container(以粉红色显示)。 Container也是一个widget,允许您自定义其子widget。如果要添加填充,边距,边框或背景色,请使用Container来设置(译者语:只有容器有这些属性)。

在这个例子中,每个Text放置在Container中以添加边距。整个行也被放置在容器中以在行的周围添加填充。

本例UI中的其他部分也可以通过属性来控制。使用其color属性设置图标的颜色。使用Text.style属性来设置字体,颜色,粗细等。列和行的属性允许您指定他们的子项如何垂直或水平对齐,以及应该占据多少空间。

布局一个 widget

重点是什么?

  • 即使应用程序本身也是一个 widget.
  • 创建一个widget并将其添加到布局widget中是很简单的.
  • 要在设备上显示widget,请将布局widget添加到 app widget中。
  • 使用Scaffold是最容易的,它是 Material Components库中的一个widget,它提供了一个默认banner,背景颜色,并且具有添加drawer,snack bar和底部sheet的API。
  • 如果您愿意,可以构建仅使用标准widget库中的widget来构建您的应用程序

如何在Flutter中布局单个widget?本节介绍如何创建一个简单的widget并将其显示在屏幕上。它还展示了一个简单的Hello World应用程序的完整代码。

在Flutter中,只需几个步骤即可在屏幕上放置文本,图标或图像。

1.选择一个widget来保存该对象。
根据您想要对齐或约束可见窗口小部件的方式,从各种布局widget中进行选择, 因为这些特性通常会传递到所包含的widget中。这个例子使用Center,它可以将内容水平和垂直居中。

2.创建一个widget来容纳可见对象

例如,创建一个Text widget:

Text(Hello World),

或者

new Text(
  Hello World, 
  style: new TextStyle(fontSize: 32.0,color: Colors.grey[500]),)
)

创建一个 Image widget:

Image.asset(
  images/lake.jpg,
  fit: BoxFit.cover,
),

或者

new Image.asset(
  images/myPic.jpg, 
  fit: BoxFit.cover, 
),

创建一个 Icon widget:

Icon(
  Icons.star,
  color: Colors.red[500],
),

或者

new Icon(
  Icons.star, 
  color: Colors.red[500]
)    

3.将可见widget添加到布局widget.
所有布局widget都有一个child属性(例如Center或Container),或者一个 children属性,如果他们需要一个widget列表(例如Row,Column,ListView或Stack)。

将Text widget添加到Center widget:

Center(
  child: Text(Hello World),
),

或者

new Center(
  child: new Text(
    Hello World, 
    style: new TextStyle(fontSize: 32.0)
  )
),

4.将布局widget添加到页面.
Flutter应用本身就是一个widget,大部分widget都有一个build()方法。在应用程序的build方法中创建会在设备上显示的widget。

对于Material应用程序,您可以使用Scaffold widget; 它提供默认横幅,背景颜色,and has API for adding drawers, snack bars, and bottom sheets。然后,您可以将Center widget直接添加到body主页的属性中。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: Flutter layout demo,
      home: new Scaffold(
        appBar: AppBar(
          title: Text(Flutter layout demo),
        ),
        body: Center(
          child: Text(Hello World),
        ),
      ),
    );
  }
}

Note: 在设计用户界面时,您可以使用标准widget库中的widget,也可以使用Material Components中的widget。 您可以混合使用两个库中的widget,可以自定义现有的widget,也可以构建一组自定义的widget。

对于非Material应用程序,您可以将Center widget添加到应用程序的build()方法中:

// 这个App没有使用Material组件,  如Scaffold.
// 一般来说, app没有使用Scaffold的话,会有一个黑色的背景和一个默认为黑色的文本颜色。
// 这个app,将背景色改为了白色,并且将文本颜色改为了黑色以模仿Material app

import package:flutter/material.dart;

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
      decoration: new BoxDecoration(color: Colors.white),
      child: new Center(
        child: new Text(
            Hello World,
            textDirection: TextDirection.ltr,
            style: new TextStyle(
                fontSize: 40.0, 
                color: Colors.black87
            )
         ),
      ),
    );
  }
}                 

请注意,默认情况下,非Material应用程序不包含AppBar,标题或背景颜色。 如果您想在非Material应用程序中使用这些功能,您必须自己构建它们。此应用程序将背景颜色更改为白色,将文本更改为深灰色以模仿Material应用程序。

好了! 当你运行这个应用时,你会看到:

技术图片

Dart 代码 (Material app): main.dart
Dart 代码 (仅使用标准Widget的app): main.dart

Flutter的布局方法

标签:widgets   world   教程   examples   fit   debugging   set   center   标签   

原文地址:https://www.cnblogs.com/joe235/p/11130893.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!