點燈坊

失くすものさえない今が強くなるチャンスよ

Container 為 Widget 設定 Alignment

Sam Xiao's Avatar 2024-10-04

Container 可設定 Widget 的 Alignment。

Version

Flutter 3.24

Alignment

container07

  • Hello World 的位置 垂直靠左
  • Text 並 沒有 提供屬性設定 alignment
  • Container 的 長寬 受 alignment 影響，會自動延展成 外層容器 的 長寬
import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  const Home({super.key});

  @override
  Widget build(BuildContext context) {
    var appBar = AppBar(title: const Text('Container Alignment'));

    var container = Container(
        alignment: Alignment.centerLeft,
        color: Colors.amber,
        child: const Text('Hello World'));

    var body = Center(child: container);

    return Scaffold(appBar: appBar, body: body);
  }
}

Line 10

var container = Container(
  alignment: Alignment.centerLeft,
  color: Colors.amber,
  child: const Text('Hello World'));
  • alignment：設定子元素對於 Container 的 alignment，但 Container 的 width 與 height 會被影響成為外層容器的 width 與 height
  • child：將 Text 包在 Container 內

Width、Height

container06

  • Hello World 的位置 垂直靠左
  • Text widget 並 沒有 提供屬性設定 alignment
  • 重新設定 Container 的 width 與 height
import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  const Home({super.key});

  @override
  Widget build(BuildContext context) {
    var appBar = AppBar(title: const Text('Container Alignment'));

    var container = Container(
        alignment: Alignment.centerLeft,
        color: Colors.amber,
        width: 200,
        height: 100,
        child: const Text('Hello World'));

    var body = Center(child: container);

    return Scaffold(appBar: appBar, body: body);
  }
}

Line 10

var container = Container(
  alignment: Alignment.centerLeft,
  color: Colors.amber,
  child: const Text('Hello World'));
  • alignment：設定子元素對於 Container 的 alignment，但 Container 的 width 與 height 會被影響成為外層容器的 width 與 height
  • width：重新設定 Container 的 width
  • height：重新設定 Container 的 height
  • child：將 Text 包在 Container 內

雖然重新設定 width 與 height 可以解決 width 與 height 被 alignment 更改的事實，但寫死 width 與 height 顯然不是最好的方法，如此 Container 就長寬就無法根據內容 自動改變

兩層 Container

container08

  • Hello World 的位置 垂直靠左，且 Container 雖著 Hello World 的長寬而變，並沒有寫死 width 與 height
import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  const Home({super.key});

  @override
  Widget build(BuildContext context) {
    var appBar = AppBar(title: const Text('Container Alignment'));

    var innerContainer =
        Container(color: Colors.amber, child: const Text('Hello World'));

    var outerContainer =
        Container(alignment: Alignment.centerLeft, child: innerContainer);

    var body = Center(child: outerContainer);

    return Scaffold(appBar: appBar, body: body);
  }
}

Line 10

var innerContainer =
  Container(color: Colors.amber, child: const Text('Hello World'));
  • 將 Text 包在 Container 內，並再次將 Container 包在 Container 內

Line 13

var outerContainer =
  Container(alignment: Alignment.centerLeft, child: innerContainer);
  • 外層 Container 負責 alignment，內層 Container 負責 color

Conclusion

  • 若沒對 Container 設定 有效 屬性，Android Studio 會提出警告

# Flutter