基本組件運(yùn)用:
Container授段、Row、Expanded番甩、TextButton侵贵、Text
兩個并排并平分寬度的按鈕,以下是代碼示例:
Container(
// 僅設(shè)置left、right邊距
padding: EdgeInsets.only(left: 15, right: 15),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
// Expanded可自適應(yīng)寬度
Expanded(
child: Container(
child: TextButton(
child:
Text('編輯', style: TextStyle(color: Color(0xff606060))),
onPressed: () {},
),
// Container可設(shè)置背景色缘薛、邊框模燥、圓角
decoration: BoxDecoration(border: Border.all(color: Color(0xffdfdfdf)), borderRadius: BorderRadius.all(Radius.circular(5))),
)),
// 間隔
Container(
width: 15
),
Expanded(
child: Container(
child: TextButton(
child: Text('編輯',
style: TextStyle(color: Colors.white)),
onPressed: () {},
),
decoration: BoxDecoration(color: Colors.red))),
],
效果圖如下:
Simulator Screen Shot - iPhone 12 - 2021-07-12 at 23.40.27.png
設(shè)置圓角和邊框,可通過Container的decoration屬性,如:
decoration: BoxDecoration(border: Border.all(color: Color(0xffdfdfdf)), borderRadius: BorderRadius.all(Radius.circular(5))),
設(shè)置十六進(jìn)制顏色:
Color(0xffdfdfdf)
設(shè)置Text的字體,可通過Text的style屬性:
Text('編輯', style: TextStyle(color: Color(0xff606060))),
以上只是簡單的一個布局,組件的布局可通過查看其擁有的屬性來設(shè)置對應(yīng)的值,方便快捷,不明白的屬性只要親自碼一遍代碼,運(yùn)行看效果即可!
今天的分享就到這兒啦, 大家晚安~
