flutter頁面佈局二

Stack

在flutter中，Stack表示堆的意思，能夠用來實現頁面的定位佈局。

Stack組件接收兩個可選參數：

• alignment：配置全部子元素的顯示位置
• children：子組件

  

在上面的Stack組件裏面定義了一個Container和兩個Text組件，咱們會發現這三個組件實現了重疊，而且後定義的在上層，這就是所謂的堆效果，

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(title: Text('FlutterDemo')),
      body: LayoutDemo(),
    ));
  }
}

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Stack(
        alignment: Alignment.center,
        children: <Widget>[              
          Container(
            height: 400,
            width: 300,
            color: Colors.red,
          ),
          Text('我是一個文本',style: TextStyle(
            fontSize: 40,
            color: Colors.white
          ))           
        ],
      ),
    );
  }
}

在上面的例子中，咱們給alignment的值是Alignment.center，除此以外，還有Alignment.topLeft等，另外，它也能夠接收兩個double類型的值，介於-1到1之間：（0,0）表示中心點，（1,1）表示右下角，（-1，-1）表示左上角。

Stack Align 

Stack 組件中結合 Align 組件能夠控制每一個子元素的顯示位置 。

  

和上面的例子同樣，當咱們在Stack組件裏面定義了多個子元素的時候，會發生重疊，即便使用了alignment進行了定位，也是對全部的元素統必定位，這個時候就能夠藉助Align來控制每一個子元素的位置。

 Align也有兩個可選參數屬性：

• alignment ：配置全部子元素的顯示位置 
• child ：子組件

如今，咱們能夠這樣修改上面的例子：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(title: Text('FlutterDemo')),
      body: LayoutDemo(),
    ));
  }
}

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child:  Container(
            height: 400,
            width: 300,
            color: Colors.red,
            child: Stack(
              // alignment: Alignment.center,
              children: <Widget>[
                Align(
                  alignment: Alignment(1,-0.2),
                  child: Icon(Icons.home,size: 40,color: Colors.white),
                ),
                Align(
                  alignment: Alignment.center,
                  child: Icon(Icons.search,size: 30,color: Colors.white),
                ),
                Align(
                  alignment: Alignment.bottomRight,
                  child: Icon(Icons.settings_applications,size: 30,color: Colors.white),
                )
              ],
            ),
      ),
    );
  }
}

 Stack Positioned 

Stack 組件中結合 Positioned 組件也能夠控制每一個子元素的顯示位置 。Positioned 有多個可選參數屬性：

• top ：子元素距離頂部的距離 
• bottom
• left 
• right 
• child 

 咱們也能夠使用Positioned來實現上面Align的效果：

 

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child:  Container(
            height: 400,
            width: 300,
            color: Colors.red,
            child: Stack(
              // alignment: Alignment.center,
              children: <Widget>[
                Positioned(
                //  left: 10,
                  child: Icon(Icons.home,size: 40,color: Colors.white),
                ),
                Positioned(
                 bottom: 0,
                 left: 100,
                  child: Icon(Icons.search,size: 30,color: Colors.white),
                ),
                Positioned(
                  right: 0,
                  child: Icon(Icons.settings_applications,size: 30,color: Colors.white),
                )
              ],
            ),
      ),
    );
  }
}