Flutter布局

1、所有的布局widget都有一个child属性（例如Center或Container【要给widget添加内边距之类的用这个】），或者一个children属性，如果他们需要一个widget列表（例如Row、Column、ListView、或Stack）。
2、Flutter应用本身就是一个widget，大部分widget都有一个build（）方法。在应用程序的build方法中创建会在设备上显示的widget。对于Material应用程序，可以将Center widget直接添加到body属性中

class _MyHomePageState extends State {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new Text('Hello World', style: new TextStyle(fontSize: 32.0)),
      ),
    );
  }
}

3、对于非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)),
      ),
    );
  }
}

4、行和列是水平和垂直布局的基本、低级widget-这些低级widget允许最大化的自定义。Flutter还提供专门的，更高级的widget，可能足以满足需求。例如，ListTile替代Row，ListTile是一个易于使用的小部件，具有前后图标属性以及最多3行文本。可能更喜欢ListView而不是列，ListView是一种列状布局，如果其内容太长而无法适应可用空间，则会自动滚动。
5、对齐widgets
可以控制行和列如何使用 mainAxisAlignment 和 crossAxisAlignment 属性来对齐其子项。对于行(Row)来说，主轴是水平方向，横轴垂直方向。对于列（Column）来说，主轴垂直方向，横轴水平方向。
MainAxisAlignment 和CrossAxisAlignment 类提供了很多控制对齐的常量.
6、使用图片需要注意
将图片添加到项目时，需要更新pubspec文件才能访问它们
pubspec.yaml文件，或在Flutter中添加资源和图像。
如果使用的是网上的图片，则不需要执行此操作，使用Image.network即可。
7、### 调整 widget

也许你想要一个widget占据其兄弟widget两倍的空间。您可以将行或列的子项放置在Expandedwidget中，以控制沿着主轴方向的widget大小。Expanded widget具有一个flex属性，它是一个整数，用于确定widget的弹性系数,默认弹性系数是1。

例如，要创建一个由三个widget组成的行，其中中间widget的宽度是其他两个widget的两倍，将中间widget的弹性系数设置为2

appBar: new AppBar(
  title: new Text(widget.title),
),
body: new Center(
  child: new Row(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      new Expanded(
        child: new Image.asset('images/pic1.jpg'),
      ),
      new Expanded(
        flex: 2,
        child: new Image.asset('images/pic2.jpg'),
      ),
      new Expanded(

聚集 widgets
默认情况下，行或列沿着其主轴会尽可能占用尽可能多的空间，但如果要将孩子紧密聚集在一起，可以将mainAxisSize设置为MainAxisSize.min。

class _MyHomePageState extends State {
  @override
  Widget build(BuildContext context) {
    var packedRow = new Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        new Icon(Icons.star, color: Colors.green[500]),
        new Icon(Icons.star, color: Colors.green[500]),
        new Icon(Icons.star, color: Colors.green[500]),
        new Icon(Icons.star, color: Colors.black),
        new Icon(Icons.star, color: Colors.black),
      ],
    );

  // ...
}

Flutter布局

你可能感兴趣的:(Flutter布局)