Flutter 頁面布局 Padding Row Column Expanded

Flutter Padding組件

在Flutter中,不是所有的組件都有padding屬性來控制元素內(nèi)不間距的.我們就可以通過Flutter為我們提供的Padding組件來實(shí)現(xiàn)

屬性 說明
padding padding 值,EdgeInsetss 設(shè)置填充的值
child 子組件

下面我們通過一個(gè)GridView不通過橫向和豎向間距的屬性達(dá)到給GridView下的內(nèi)容進(jìn)行隔離開.
實(shí)現(xiàn)邏輯:
1.對GridView下的子組件添加Padding組件,設(shè)置左邊距10,上邊距10.(此時(shí)會(huì)發(fā)現(xiàn)最右邊的子元素緊貼著手機(jī)屏幕邊緣)
2.對GridView外層添加Padding組件,設(shè)置右邊距,達(dá)到視覺間隔的效果
實(shí)現(xiàn)效果如下:

image.png

代碼:

import "package:flutter/material.dart";
class Demo01 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '練習(xí)頁面',
      home: Scaffold(
        appBar: AppBar(
          title: Text('練習(xí)頁面')
        ),
        body: Container(
          child: GetGridViewList()
        )
      ),
    );
  }
}
class GetGridViewList extends StatelessWidget {
    @override
  Widget build(BuildContext context) {
    List imageList = [
      'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=158710161,3575221320&fm=26&gp=0.jpg',
      'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=158710161,3575221320&fm=26&gp=0.jpg',
      'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=158710161,3575221320&fm=26&gp=0.jpg',
      'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=158710161,3575221320&fm=26&gp=0.jpg',
      'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=158710161,3575221320&fm=26&gp=0.jpg',
      'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=158710161,3575221320&fm=26&gp=0.jpg',
      'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=158710161,3575221320&fm=26&gp=0.jpg',
    ]; 
    Widget _getImageList(context, index) {
      return Container(
        child: Column(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.fromLTRB(10, 10, 0, 0), // 給圖片組件的左和上添加10的padding距離
              child: Image.network(imageList[index], fit: BoxFit.cover)
            )
          ],
        )
      );
    }
    return Padding(
      //- EdgeInsets.fromLTRB 4個(gè)參數(shù)分別是左,上,右,下
      padding: EdgeInsets.fromLTRB(0, 0, 10, 0),  //- 對整個(gè)GridView添加一個(gè)右邊距
      child: GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2, //- 一行的Widget 數(shù)量,
          childAspectRatio: 1.44,  //- 設(shè)置寬度和高度的比例
        ),
        itemCount: imageList.length,
        itemBuilder: _getImageList,
      )  
    );
  }
}

自定義按鈕組件(參數(shù)傳遞)

在講Row組件和Column組件之前,我們先看一下組件之間的參數(shù)傳遞以及構(gòu)造函數(shù)的使用(必傳參數(shù)和可選參數(shù))
通過參數(shù)傳遞,調(diào)用IconContainer組件實(shí)現(xiàn)每次調(diào)用可以傳入不同的值,顯示不同的圖標(biāo)以及顏色和大小

import 'package:flutter/material.dart';

class RowAndColumnPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: "Row and Column",
      home: Scaffold(
        appBar: AppBar(
          title: Text('Row and Clumn'),
        ),
        body: Column(
          children: <Widget>[
            RowWidget(), //- Row 組件展示
          ],
        )
      )
    );
  }
}

class RowWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return IconContainer(Icons.home, color: Colors.green);
  }
}

class IconContainer extends StatelessWidget {
  // 定義一個(gè)構(gòu)造函數(shù),把圖標(biāo),大小,顏色進(jìn)行動(dòng)態(tài)傳入接收
  // size和color為可選參數(shù),我們設(shè)置一個(gè)默認(rèn)值
  double size = 32.0;
  Color color = Colors.orangeAccent;
  IconData icon; 
  IconContainer(this.icon,{this.color, this.size});  //- 這種寫法表示icon為必填參數(shù), color和size為可選參數(shù)
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100.0,
      height: 100.0,
      color: this.color,
      child: Center(
        child: Icon(this.icon, size: this.size, color: Colors.white)
      )
    );
  }
}

Flutter Row組件

水平布局組件

屬性 說明
mainAxisAlignment 主軸的排序方式
crossAxisAlignment 次軸的排序方式
children 組件子元素

我們結(jié)合前面的例子,RowWidget組件現(xiàn)在需要多次調(diào)用IconContainer組件,傳入不同的參數(shù),這個(gè)時(shí)候使用Row組件來實(shí)現(xiàn),其中Row組件下的children屬性允許我們傳入一個(gè)List<Widget>.

class RowWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        IconContainer(Icons.home, color: Colors.green),
        IconContainer(Icons.arrow_forward, color: Colors.blueGrey),
        IconContainer(Icons.adjust, color: Colors.deepOrange),
      ],
    );
  }
}

這樣就簡單的實(shí)現(xiàn)了調(diào)用IconContainer組件傳入不同的參數(shù),通過Row組件進(jìn)行橫向布局.頁面效果:

image.png

設(shè)置主軸屬性 mainAxisAlignment

下面介紹一下 mainAxisAlignment屬性,通過MainAxisAlignment調(diào)用會(huì)發(fā)現(xiàn)下面還有一些屬性,例如center

image.png

這里列舉一下各個(gè)屬性的顯示樣式:

start

image.png

center

image.png

end

image.png

spaceAround(元素之間的距離是頁面邊距離的兩倍)

image.png

spaceBetween

image.png

spaceEvenly

image.png
設(shè)置次軸屬性 crossAxisAlignment

前面的例子中,只有一行橫向位置,無法體現(xiàn)出crossAxisAlignment屬性的效果,我們在Row外面套一層容器,并設(shè)置高和寬之后,通過crossAxisAlignment次軸屬性來在橫向布局的縱向進(jìn)行操作.

class RowWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 300.0,
      width: 400.0,
      color: Colors.lightBlue,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          IconContainer(Icons.home, color: Colors.green),
          IconContainer(Icons.arrow_forward, color: Colors.blueGrey),
          IconContainer(Icons.adjust, color: Colors.deepOrange)
        ],
      ),
    );
  }
}

上面的代碼在外層設(shè)置了容器后,顯示如下:


image.png

同樣,我們調(diào)用次軸屬性后依然會(huì)有很多屬性選擇


image.png

簡單方便理解的使用表格說明一下,特殊的采用圖文的形式表達(dá):
屬性 說明
center 次軸居中
start 次軸靠前(當(dāng)前是Row組件所以是靠上顯示)
end 次軸靠后(當(dāng)前是Row組件所以是靠下顯示)
CrossAxisAlignment.stretch(次軸占滿整個(gè)屏幕)
image.png

Flutter Column組件

垂直布局組件

屬性 說明
mainAxisAlignment 主軸的排序方式
crossAxisAlignment 次軸的排序方式
children 組件子元素

垂直布局組件Column用法與Row組件用法相同,注意主軸和次軸對應(yīng)的方向使用既可.

Flutter Expanded 類似Web中的Flex

Expanded 組件可以用在Row 和Column布局中

屬性 說明
flex 元素占整個(gè)父Row/Column的比例
chile 子元素

我們在實(shí)際項(xiàng)目中經(jīng)常會(huì)遇到一個(gè)情況,左邊一個(gè)區(qū)塊顯示圖片,右邊是新聞標(biāo)題.但是左邊的圖片位置的剩余部分的全部寬度都要顯示為文字區(qū)域.
效果如下:

image.png

我們可以采用Expanded把元素包起來,并設(shè)置flex屬性來解決就可以了

import 'package:flutter/material.dart';

class RowAndColumnPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: "Row and Column",
      home: Scaffold(
        appBar: AppBar(
          title: Text('Row and Clumn'),
        ),
        body: Column(
          children: <Widget>[
            RowWidget(), //- Row 組件展示
          ],
        )
      )
    );
  }
}

class RowWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Container(
          width:100.0,
          height:100.0,
          child: Image.network(
            'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=158710161,3575221320&fm=26&gp=0.jpg',
             fit: BoxFit.cover
          ),
        ),
        Expanded(
          flex: 1,
          child: ListTile(
            title: Text('這里是新聞的標(biāo)題這里是新聞的標(biāo)題這里是新聞的標(biāo)題',overflow: TextOverflow.ellipsis,),
            subtitle: Text('這里是副標(biāo)題這里是副標(biāo)題這里是副標(biāo)題這里是副標(biāo)題這里是副標(biāo)題這里是副標(biāo)題這里是副標(biāo)題這里是副標(biāo)題這里是副標(biāo)題這里是副標(biāo)題', overflow: TextOverflow.ellipsis,maxLines: 2)
          )
        ),
      ],
    );
  }
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

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

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