iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 5
1
Mobile Development

Dart & Flutter - 學寫App | 菜鳥筆記 | 堅持30天挑戰系列 第 5

Flutter 常用組件講解 | ContainerWidget

ContainerWidget 容器組件講解

Container 容器組件

  1. 如何興建容器組件

    @override
    Widget build(BuildContext context) {
      return MaterialApp(
          title: 'TextWidget',
          home: Scaffold(
              appBar: AppBar(
                title: Text('TextWidget'),
              ),
              body: Center(
                  child: Container(
                      child: new Text(
                        'Hello Imooc',
                        style: TextStyle(fontSize: 40.0)
                      ),
                      alignment: Alignment.bottomRight
                  )
              )
          )
      );
    
  2. Alignment 屬性的使用

  • 有 9 種對齊方式

  • 內容對齊

    alignment: Alignment.bottomCenter
    alignment: Alignment.bottomLeft
    alignment: Alignment.bottomRight
    alignment: Alignment.center
    alignment: Alignment.centerLeft
    alignment: Alignment.centerRight
    alignment: Alignment.topCenter
    alignment: Alignment.topLeft
    alignment: Alignment.topRight
    
  1. 設置寬高和顏色
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
          title: 'TextWidget',
          home: Scaffold(
              appBar: AppBar(
                title: Text('TextWidget'),
              ),
              body: Center(
                  child: Container(
                    child: new Text(
                      'Hello Imooc',
                      style: TextStyle(
                        fontSize: 40.0
                      )
                    ),
                  alignment: Alignment.bottomRight,
                  width: 300.0,
                  height: 300.0,
                  color: Colors.lightBlue,
              ))));
    }
    
cotainer cotainer-color
cotainer cotainer-color
  1. Padding 內邊距屬性的使用
  • Edgelnsets.all(): 統一設置

  • Edgelnsets.fromLTRB(value1, value2, value3, value4)

    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'TextWidget',
        home: Scaffold(
          appBar: AppBar(
            title: Text('TextWidget'),
          ),
          body: Center(
            child: Container(
              child: new Text(
                'Hello Imooc',
                style: TextStyle(fontSize: 40.0)
              ),
              alignment: Alignment.bottomRight,
              width: 300.0,
              height: 300.0,
              color: Colors.lightBlue,
              padding: const EdgeInsets.all(30.0)  // padding-all
            )
          )
        )
      );
    }
    
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'TextWidget',
        home: Scaffold(
          appBar: AppBar(
            title: Text('TextWidget'),
          ),
          body: Center(
            child: Container(
              child: new Text(
                'Hello Imooc',
                style: TextStyle(fontSize: 40.0)
              ),
              alignment: Alignment.bottomRight,
              width: 300.0,
              height: 300.0,
              color: Colors.lightBlue,
              padding: const EdgeInsets.fromLTRB(0.0, 30.0, 60.0, 40.0)  // padding-fromLTRB
            )
          )
        )
      );
    }
    
padding-35 padding-ltrb
padding-35 padding-ltrb
  1. margin 外邊距屬性的使用

      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'TextWidget',
          home: Scaffold(
            appBar: AppBar(
              title: Text('TextWidget'),
            ),
            body: Center(
              child: Container(
                child: new Text('Hello Imooc',
                  style: TextStyle(fontSize: 40.0)),
                alignment: Alignment.bottomRight,
                width: 300.0,
                height: 300.0,
                color: Colors.lightBlue,
                padding: const EdgeInsets.fromLTRB(0.0, 30.0, 60.0, 40.0),
                margin: const EdgeInsets.all(100.0)    // margin
              )
            )
          )
        );
      }
    
  2. decoration 屬性製作彩色背景

  • decoration 修飾器
    • 設置容器的邊框
    • BoxDecoration Widget 講解
    • LinearGradient 設置背景顏色漸變

任何屬性,也皆做組件使用。 牢記:萬物皆組件!

@override
Widget build(BuildContext context) {
  return MaterialApp(
    title: 'TextWidget',
    home: Scaffold(
      appBar: AppBar(
        title: Text('TextWidget'),
      ),
      body: Center(
        child: Container(
          child: new Text('Hello Imooc',
            style: TextStyle(fontSize: 40.0)
          ),
          alignment: Alignment.bottomRight,
          width: 300.0,
          height: 300.0,
          // color: Colors.lightBlue,       要去掉,避免衝突
          padding: const EdgeInsets.fromLTRB(0.0, 30.0, 60.0, 40.0),
          margin: const EdgeInsets.all(100.0),
          decoration: new BoxDecoration(        // 修飾器
            gradient: const LinearGradient(   // 線性漸變
              colors: [    // 三個顏色,以數組形式包裝
                Colors.lightBlue,
                Colors.greenAccent,
                Colors.purple
              ]
            )
          )
        )
      )
    )
  );
}
margin decoration
margin decoration

上一篇
Flutter 常用組件講解 | TextWidget
下一篇
Flutter 常用組件講解 | ImageWidget
系列文
Dart & Flutter - 學寫App | 菜鳥筆記 | 堅持30天挑戰12

尚未有邦友留言

立即登入留言