Flutter學習基礎組件之Container

Container相當于iOS中的UIView,可以設置大小,顏色,邊框,圓角等屬性

MaterialApp、Center和Scaffold也是基礎組件,這里先做簡單了解

void main() => runApp(MyApp());//入口函數(shù)

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override//代表重寫build方法,build方法類似于ViewControllerr里的ViewDidLoad
  Widget build(BuildContext context) {
    return MaterialApp(//MaterialApp和Scaffold
      home: Scaffold(
        appBar: AppBar(
          title: Text('Demo',
            style: TextStyle(
              color: Colors.red
            ),),
        ),
        body: HomeContent(),//頁面展示的內容
      )
    );
  }
}

Container用法在這里,它的屬性有
width、height、child、decoration(背景色,圓角,邊框都在這里設置)

class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(//讓Container在屏幕中居中顯示
      child: Container(
        width: 200,
        height: 200,
        decoration: BoxDecoration(
          color: Colors.red,//背景色
          border: Border.all(//邊框
            color: Colors.black,//邊框色
            width: 5//邊框寬度
          ),
          borderRadius: BorderRadius.all(
            Radius.circular(10),//設置圓角
          ),
        ),
        padding: EdgeInsets.all(20),//內邊距
        alignment: Alignment.bottomRight,//內部內容的對齊方式
        child: Text('內容',
        textAlign: TextAlign.center,//對齊方式
          overflow: TextOverflow.ellipsis,//超出范圍的顯示方式為3個.
          maxLines: 1,//最大顯示行數(shù)
        style: TextStyle(fontSize: 30,
          color: Colors.orange
        ),
        ),
      ),
    );
  }
}
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容