Flutter之常用組件

基礎(chǔ)組件

文本組件

Text

用于顯示簡(jiǎn)單樣式文本，包含一些控制樣式屬性

Text(
"Text",
maxLines: 1, 
overflow: TextOverflow.ellipsis, // 超出部分...
style: TextStyle(
    fontSize: 12, color: Color(0xFF333333), fontWeight: FontWeight.bold),
textAlign: TextAlign.center,
)

按鈕與手勢(shì)組件

IconButton

IconButton是一個(gè)可點(diǎn)擊的Icon，不包括文字

IconButton(
  icon: Icon(Icons.thumb_up),
  onPressed: () {},
)

RaisedButton

默認(rèn)灰色的帶陰影的按鈕

RaisedButton(
child: Text("Text"),
onPressed: () {
    print("Text");
    })

帶圖標(biāo)的按鈕

RaisedButton.icon(
onPressed: () {
    print("Text");
    },
    icon: Icon(Icons.send),
    label: Text("Text"))

手勢(shì)組件

GestureDetector

GestureDetector(
      child: Text("Text"),
      onTapUp: () {
        print("onTapUp");
      },
      onTapDown: () {
        print("onTapDown");
      },
      onTapCancel: () {
        print("onTapCancel");
      },
      onTap: () {
        print("onTap");
      },
      onDoubleTap: () {
        print("onDoubleTap");
      },
      onLongPress: () {
        print("onLongPress");
      },
    )

圖片組件

Image

Widget image;
    if (this.imgUrl.isEmpty) {
      image = Image.asset(
        "placeholderPath",
        height: 75,
        width: 124,
        alignment: Alignment.center,
        repeat: ImageRepeat.noRepeat,
      );
    } else {
      image = FadeInImage.assetNetwork(
        fit: BoxFit.fill,
        placeholder: "placeholderPath",
        image: "http://xxxxx.png",
        height: 75,
        width: 124,
      );
    }
    return image;

單選框和復(fù)選框

Checkbox

Checkbox(
      value: isSelected,
      activeColor: Colors.red,
      onChanged: (value) {
        print(value);
      },
    )

單選開關(guān)

Switch(
      value: isSelected,
      activeColor: Colors.red,
      onChanged: (value){
      print(value);
    },)

裁剪組件

剪裁處理組件
Clip的相關(guān)組件：
ClipOval：圓形裁剪
ClipRRect：圓角矩形裁剪
ClipRect：矩形裁剪
ClipPath：路徑裁剪

ClipOval(
child: SizeBox(
width: 100, height: 100, child: Image.network("http://xxxxx.png")),
)

隱藏與透明組件

opacity

透明度組件

Opacity(
opacity: 0.5,
child: Text("Text"),
)

Visibility

控制子組件是否可見的組件

Visibility(
visible: false,// 子組件是否可見，默認(rèn)true
child: Text("Text"),// 子組件
replacement: Text("data"),// 不可見時(shí)顯示的組件（當(dāng)maintainState=false）
maintainState: true,//不可見時(shí)是否維持狀態(tài)，默認(rèn)為false
)

效果組件

InkWell

點(diǎn)擊時(shí)有陰影效果

InkWell(
child: Text("Text"),
onTap: () {
print("Text");
},
)

容器類組件

腳手架

int _selectedIndex = 1;
  @override
  Widget build(BuildContext context) {
    return Scaffold(// 腳手架
      appBar: AppBar(// 導(dǎo)航欄
        title: Text("Text"),
        actions: [
          IconButton(
              // 導(dǎo)航欄右側(cè)菜單
              icon: Icon(Icons.share),
              onPressed: () {
                print("share");
              })
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(// 底部導(dǎo)航欄
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.help_center),
          ),
        ],
        currentIndex: _selectedIndex,
        fixedColor: Colors.lightBlue,
        onTap: (index) {
          print("selected: $index");
          setState(() {
            _selectedIndex = index;
          });
        },
      ),
      body: IndexedStack(// 可以在一個(gè)組件上放置另一個(gè)組件，并且同時(shí)只顯示一個(gè)組件
        index: _selectedIndex,
        children: [
          HomeScreen(),
          HelpCenterScreen()
        ],
      ),
    );
  }

其他容器

Container容器

是一個(gè)組合類的容器組件，不參與最終的渲染

Container(
      color: Colors.white, // 背景色
      decoration: BoxDecoration(color: Color(0xFFFFFFFF)), // 背景裝飾（與color不能共存，同時(shí)只能有一個(gè)）
      width: 100,// 容器的寬度
      height: 100,// 容器的高度
      margin: EdgeInsets.only(left: 10, top: 10),
      padding: EdgeInsets.all(10),
      child: Text("Text"),
    )

SizeBox裝飾類容器

可以設(shè)置具體尺寸的控件，child不為null時(shí)，如果設(shè)置寬高，則強(qiáng)制顯示寬高，如果沒有設(shè)置，則自適應(yīng)；如果child為null時(shí)，可當(dāng)做間隔使用

SizedBox(
      height: 16,
      child: Text("Text"),
    )

DecoratedBox裝飾類容器

可以在其子組件繪制前（或者繪制后）繪制一些裝飾，如背景、邊框、漸變等

DecoratedBox(
      decoration: BoxDecoration(
        color: Colors.white,// 背景色
        borderRadius: BorderRadius.all(Radius.circular(2.0)),// 圓角
        border: Border.all(color: Colors.pink, width: 1),// 邊框
        gradient: LinearGradient(colors: [Colors.red, Colors.orange[700]]),// 漸變
        boxShadow: [// 陰影
          BoxShadow(
              color: Colors.black12, offset: Offset(5.0, 5.0), blurRadius: 4.0)
        ],
      ), 
      child: Text("Text"),
    )

SafeArea安全區(qū)域

留出劉海和底部的安全區(qū)域，很好的解決劉海屏兼容問題

SafeArea(child: Text("Text"))

布局組件

線性布局

row

水平方向排布組件，不會(huì)自動(dòng)換行

Row(
    mainAxisAlignment: MainAxisAlignment.start,// 主軸對(duì)齊方式
    crossAxisAlignment: CrossAxisAlignment.start,// 交叉軸對(duì)齊方式
      children: [
        Text("Text1"),
        Text("Text2"),
        Text("Text3"),
        Text("Text4"),
      ],
    )

column

垂直方向排布組件，不會(huì)自動(dòng)換行

Column(
      children: [
        Text("Text1"),
        Text("Text2"),
        Text("Text3"),
        Text("Text4"),
      ],
    )

Expanded

可以使Row、Column、Flex等，子組件在其主軸上展開并填充可用空間，撐開父組件。必須使用在Row、Column、Flex等

Column(
      children: [
        Text("Text1"),
        Text("Text2"),
        Expanded(
          child: Text("Expanded"),
        ),
        Text("Text3"),
        Text("Text4"),
      ],
    )

彈性布局

Flex

如h5當(dāng)中的彈性盒子布局，Row和Column都繼承自Flex，參數(shù)也基本一致所以可以使用Row和Column來(lái)代替Flex

Flex(
      direction: Axis.horizontal,
      children: <Widget>[
        Text("Text1"),
        Text("Text2"),
        Text("Text3"),
        Text("Text4"),
      ],
    )

流式布局

Wrap、Flow

Wrap和Row類似，如果一行控件不夠會(huì)自動(dòng)換行
Flow和Column類似，如果一列控件不夠會(huì)自動(dòng)換行

Wrap(
      spacing: 8.0, // 主軸（水平）方向間距
      runSpacing: 8.0, // 縱軸（垂直）方向間距
      alignment: WrapAlignment.center, // 沿主軸方向居中
      children: <Widget>[
        Text("Text1"),
        Text("Text2"),
        Text("Text3"),
        Text("Text4"),
      ],
    )

層疊布局

Stack、positioned

類似絕對(duì)定位，往往與Positioned聯(lián)合使用，子組件可以根據(jù)父容器四個(gè)角的位置來(lái)確定自身的位置。絕對(duì)定位允許子組件堆疊起來(lái)（按照代碼中聲明的順序）。

// 通過ConstrainedBox來(lái)確保Stack占滿屏幕
ConstrainedBox(
      constraints: BoxConstraints.expand(),
      child: Stack(
        alignment: Alignment.center, // 指定未定位或部分定位widget的對(duì)齊方式
        fit: StackFit.expand, // 未定位widget占滿Stack整個(gè)空間
        children: <Widget>[
          Container(
              child: Text("Container"), style: TextStyle(color: Colors.white)
              color: Colors.red,),
          Positioned(
            left: 18.0,
            child: Text("left"),
          ),
          Positioned(
            top: 18.0,
            child: Text("top"),
          )
        ],
      ),
    )

相對(duì)定位

Align

Align組件可以調(diào)整子組件的位置，并且可以根據(jù)子組件的寬高來(lái)確定自身的寬高

Container(
      height: 120.0,
      width: 120.0,
      color: Colors.blue,
      child: Align(
        alignment: Alignment.topRight,
        child: Text("Text"),
      ),
    )

可滾動(dòng)組件

ListView

ListView是最常用的可滾動(dòng)組件之一，它可以沿一個(gè)方向線性排布所有子組件，并且它也支持基于Sliver的延遲構(gòu)建模型

ListView(
      scrollDirection: Axis.vertical,
      shrinkWrap: true,
      padding: const EdgeInsets.all(20.0),
      children: <Widget>[// 使用children只適用于組件較少的情況
        const Text("Text1"),
        const Text("Text2"),
        const Text("Text3"),
        const Text("Text4"),
        const Text("Text5"),
      ],
    )

子組件較多時(shí)使用ListView.builder

ListView.builder(
        itemCount: 100,
        itemExtent: 50.0, // 強(qiáng)制高度為50.0
        itemBuilder: (BuildContext context, int index) {
          return ListTile(
            title: Text("$index"),
          );
        })

GridView

GridView可以構(gòu)建一個(gè)二維網(wǎng)格列表

GridView(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3, childAspectRatio: 1.0),
        children: [
          Icon(Icons.ac_unit),
          Icon(Icons.airport_shuttle),
          Icon(Icons.all_inclusive),
          Icon(Icons.beach_access),
          Icon(Icons.cake),
          Icon(Icons.free_breakfast)
        ])
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容