11Flutter頁面布局 Stack層疊組件 Stack與Align Stack與Positioned實現定位布局

/*
  Flutter 頁面布局 Stack層疊組件：
  Stack與Align Stack與Positioned實現定位布局：
  Flutter Stack組件：
  Stack表示堆得意思，我們可以用Stack或者Stack結合Align或者Stack結合Positiond來實現頁面的定位布局：
  alignent 配置所有子元素的顯示位置。
  children 子組件

  Flutter Stack Align
  Stack組件中結合Align組件可以控制每個子元素的顯示位置。
  
*/

Stack與Align實現定位布局：

效果圖：

main.dart

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('Padding Row Column Expanded'),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //Stack結合align實現布局：
    return Center(
      child: Container(
        width: 300.0,
        height: 400.0,
        color: Colors.red,
        child: Stack(
          children: <Widget>[
            Align(
              alignment: Alignment.topLeft,
              child: Icon(Icons.home, color: Colors.white,size: 40),
            ),
            Align(
              alignment: Alignment.center,
              child: Icon(Icons.search, color: Colors.white,size: 40),
            ),
            Align(
              alignment: Alignment.bottomRight,
              child: Icon(Icons.select_all, color: Colors.white,size: 40),
            ),
          ],
        ),
      ),
    );
  }
}

Stack與Positioned

效果圖：

main.dart

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('Padding Row Column Expanded'),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //Stack結合align實現布局：
    return Center(
      child: Container(
        width: 300.0,
        height: 400.0,
        color: Colors.red,
        child: Stack(
          children: <Widget>[
            Positioned(
              top: 0,
              right: 10,
              child: Icon(Icons.home, color: Colors.white,size: 40),
            ),
            Positioned(
              top: 10,
              left: 10,
              child: Icon(Icons.search, color: Colors.white,size: 40),
            ),
            Positioned(
              bottom: 10,
              right: 20,
              child: Icon(Icons.select_all, color: Colors.white,size: 40),
            ),
          ],
        
        ),
      ),
    );
  }
}