column佈局及屬性

import 'package:flutter/material.dart';

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  @override
  Widget build(BuildContext context) {
    var scaffold = Scaffold(
      appBar: new AppBar(
        leading: Builder(
          builder: (BuildContext context) {
            return IconButton(
              icon: new Icon(Icons.keyboard_backspace),
              onPressed: _pushSaved,
            );
          },
        ),
        title: new Text('登錄'),
      ),
      body: Container(
        child: new Column(
          // start ,沿着主軸方向(垂直方向)頂部對齊;
          // end,沿着主軸方向(垂直方向)底部對齊;
          // center,沿着主軸方向(垂直方向)居中對齊;
          // spaceBetween ,沿着主軸方向(垂直方向)平分剩餘空間;
          // spaceAround,把剩餘空間平分紅n份,n是子widget的數量,而後把其中一份空間分紅2份,放在第一個child的前面,和最後一個child的後面;
          // spaceEvenly,把剩餘空間平分n+1份,而後平分全部的空間,請注意和spaceAround的區別;
          mainAxisAlignment: MainAxisAlignment.start,
          //在主軸方向佔有空間的值,默認是max
          mainAxisSize: MainAxisSize.max,
          // start ,垂直主軸方向(水平方向)左側對齊;
          // end,垂直主軸方向(水平方向)右側對齊;
          // center,垂直主軸方向(水平方向)居中對齊;
          // stretch ,垂直主軸方向(水平方向)拉伸子child;
          // baseline,和textBaseline一塊兒使用,
          crossAxisAlignment: CrossAxisAlignment.start,
          // textDirection:文字佈局方向
         //TextDirection.ltr ,從左到右;
         // TextDirection.rtl,從右到作佈局;
         textDirection:TextDirection.ltr,
         // down ,從上向下佈局;
         // up,反過來從下向上佈局
          verticalDirection: VerticalDirection.down,
          textBaseline: TextBaseline.alphabetic,
          children: <Widget>[
            new Text(
                  '密碼登錄',
                  style: new TextStyle(
                    color: Colors.black,
                    fontWeight: FontWeight.bold,
                  ),
                ),
            Container(
              color: Colors.blue,
              height: 60,
              width: 60,
            ),
            Container(
              color: Colors.yellow,
              height: 60,
              width: 60,
            ),
          ],
        ),
      ),
    );
    return scaffold;
  }

  void _pushSaved() {}
}
相關文章
相關標籤/搜索