iT邦幫忙

2023 iThome 鐵人賽

DAY 8
0
Mobile Development

初窺Flutter系列 第 8

Widgets-Container(容器)

  • 分享至 

  • xImage
  •  

Container可創建具有不同樣式和約束的矩形容器,用於放置其他子widgets

主要屬性和功能

  1. width(寬度)和height(高度):可以設置Container的寬度和高度,以固定容器的大小。
  2. color(顏色):Container可以設置背景顏色,用来填充矩形區域。
  3. border(邊框) :設定圖形邊框寬度
  4. alignment(對齊方式):您可以指定Container内部子部件的對齊方式,如頂部、底部、居中等。
Widget build (BuildContext context){
    return new Center(
      child: new Container(
      width: 350, //設定寬度
        height: 450,  //設定高度
        decoration: new BoxDecoration(  //裝飾內部布建用可定義容器形色
          color: Colors.lightBlueAccent[100],  //容器背景顏色
          border: new Border.all(  //創建邊框
            color: const Color(0xff6d9eeb), //設定邊框顏色
                width:8 //設定邊框寬度
          ),
            borderRadius:const BorderRadius.all(const Radius.circular(50) )  //設定圓角
        ),
      ),
    );
  }

程式碼執行結果
https://ithelp.ithome.com.tw/upload/images/20230923/20162684NORskfSvoR.png
在Container中添加小部件,如:文字。 新增下段程式碼

child: new Text('Hello, Flutter!'),

執行結果如下,若下調整文字位置可使用textAlign 調整對齊位置
https://ithelp.ithome.com.tw/upload/images/20230923/201626842lVoJgnTal.png

(Flutter Container https://api.flutter.dev/flutter/widgets/Container-class.html )


上一篇
Widgets-image(圖片)
下一篇
Widgets-ListView(列表)
系列文
初窺Flutter30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言