flutter簡(jiǎn)單使用

一篇能夠快速使用的介紹。

前言

快速使用flutter開發(fā)。

一、布局介紹

二、本地圖片使用

1，將圖片放入images文件夾下。
2，在pubspec.yaml文件中對(duì)圖片進(jìn)行聲明，如果沒有聲明，運(yùn)行時(shí)就會(huì)報(bào)錯(cuò)：Unable to load asset: xxx.png。

3，通過(guò) AssetImage(‘images/app.png’),來(lái)加載本地圖片。 網(wǎng)絡(luò)圖片加載Image.network(“http://a.jpg”);

三、網(wǎng)絡(luò)數(shù)據(jù)解析

1，json.decode() 方法會(huì)將 String類型數(shù)據(jù)解析成Map數(shù)據(jù)結(jié)構(gòu)：Map<String, dynamic>, 取數(shù)據(jù)的格式為object[key]。
如： List items=response.data[“data”]; //response.data 接口返回?cái)?shù)據(jù)
string name=response.data[“name”];
2，https://javiercbk.github.io/json_to_dart/ 將json數(shù)據(jù)在線生成Json實(shí)體類的地址。
使用：var data= jsonDecode(response.toString());
var newsBean = NewsBean.fromJson(data);

四、路由使用

1，普通跳轉(zhuǎn)：
Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) => Page()));
2，帶參數(shù)跳轉(zhuǎn)和接收參數(shù):
跳轉(zhuǎn)： Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) => Page1(”我是跳轉(zhuǎn)時(shí)傳的參數(shù)”)));
接收：final String message = ModalRoute.of(context).settings.arguments as String;
3.跳轉(zhuǎn)后攜帶參數(shù)返回：
跳轉(zhuǎn)：Future result = Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) => Page2(“我是跳轉(zhuǎn)時(shí)傳的參數(shù)”)));
接收： result.then((res) {
setState(() { //setState是一個(gè)監(jiān)聽的方法 res是返回來(lái)的參數(shù)
_handleMessage = res;
});});
返回：Navigator.of(context).pop(“這是返回?cái)y帶的參數(shù)”);

五、插件的使用

https://pub.flutter-io.cn/flutter/packages插件庫(kù)，查找自己想要的插件。

使用Flutter實(shí)現(xiàn)短視頻上滑翻頁(yè)效果

前言

我們?cè)诙桃曨l應(yīng)用中經(jīng)常會(huì)看到不停上滑瀏覽下一條視頻的沉浸式交互效果，這種交互能夠讓用戶不停地翻頁(yè)，直到找到喜歡的視頻內(nèi)容，從而營(yíng)造一種不斷“搜尋目標(biāo)”的感覺，讓用戶欲罷不能。這種交互形式在 Flutter 中可以輕松使用 PageView 組件實(shí)現(xiàn)。

PageView 組件介紹

PageView 組件專門設(shè)計(jì)用來(lái)實(shí)現(xiàn)翻頁(yè)效果，類定義如下：

PageView({
    Key? key,
    this.scrollDirection = Axis.horizontal,
    this.reverse = false,
    PageController? controller,
    this.physics,
    this.pageSnapping = true,
    this.onPageChanged,
    List<Widget> children = const <Widget>[],
    this.dragStartBehavior = DragStartBehavior.start,
    this.allowImplicitScrolling = false,
    this.restorationId,
    this.clipBehavior = Clip.hardEdge,
    this.scrollBehavior,
    this.padEnds = true,
  }) 

其中常用的屬性說(shuō)明如下：

• scrollDirection：滑動(dòng)方向，可以支持縱向翻頁(yè)或橫向翻頁(yè)，默認(rèn)是橫向翻頁(yè)。
• controller：翻頁(yè)控制器，可以通過(guò)控制器來(lái)制定初始頁(yè)，以及跳轉(zhuǎn)到具體的頁(yè)面。
• onPageChanged：翻頁(yè)后的回調(diào)函數(shù)，會(huì)告知翻頁(yè)后的頁(yè)碼。
• reverse：是否反向翻頁(yè)，默認(rèn)是 false。如果橫向滑動(dòng)翻頁(yè)的話，如果開啟反向翻頁(yè)，則是從右到左翻頁(yè)。如果是縱向翻頁(yè)的話，就是從頂部到底部翻頁(yè)。
• children：在翻頁(yè)中的組件列表，每一頁(yè)都以自定義組件內(nèi)容，因此這個(gè)組件也可以用于做引導(dǎo)頁(yè)，或是類似滑動(dòng)查看詳情的效果。

使用示例

PageView 使用起來(lái)非常簡(jiǎn)單，我們先定義一個(gè)PageView 翻頁(yè)的內(nèi)容組件，簡(jiǎn)單地將接收的圖片文件滿屏顯示。代碼如下，實(shí)際應(yīng)用的時(shí)候可以根據(jù)需要換成其他自定義組件。

 class ImagePageView extends StatelessWidget {
  final String imageName;
  const ImagePageView({Key? key, required this.imageName}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Image.asset(
        imageName,
        fit: BoxFit.fitHeight,
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
      ),
    );
  }
}

之后是定義一個(gè) PageViewDemo 來(lái)應(yīng)用 PageView 翻頁(yè)應(yīng)用示例，代碼如下：

class PageViewDemo extends StatefulWidget {
  const PageViewDemo({Key? key}) : super(key: key);
  @override
  State<PageViewDemo> createState() => _PageViewDemoState();
}
class _PageViewDemoState extends State<PageViewDemo> {
  late PageController _pageController;
  int _pageIndex = 1;
  @override
  void initState() {
    _pageController = PageController(
      initialPage: _pageIndex,
      viewportFraction: 1.0,
    );
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: PageView(
        scrollDirection: Axis.vertical,
        onPageChanged: (index) {
          _pageIndex = index;
        },
        controller: _pageController,
        allowImplicitScrolling: false,
        padEnds: true,
        reverse: false,
        children: const [
          ImagePageView(imageName: 'images/earth.jpeg'),
          ImagePageView(imageName: 'images/island-coder.png'),
          ImagePageView(imageName: 'images/mb.jpeg'),
        ],
      ),
    );
  }
}

這個(gè)示例里，我們的 pageController 只是演示了設(shè)置初始頁(yè)碼。我們看到的 viewportFraction 可以理解為一頁(yè)內(nèi)容占據(jù)屏幕的比例，比如我們可以設(shè)置該數(shù)值為1/3，支持一個(gè)屏幕分段顯示3個(gè)頁(yè)面內(nèi)容。

PageController 應(yīng)用

PageController 可以控制滑動(dòng)到指定位置，比如我們可以調(diào)用 animateToPage方法實(shí)現(xiàn)一個(gè)快速滑動(dòng)到頂部的懸浮按鈕。

floatingActionButton: FloatingActionButton(
    onPressed: () {
      _pageController.animateToPage(
        0,
        duration: const Duration(
          milliseconds: 1000,
        ),
        curve: Curves.easeOut,
      );
    },
    backgroundColor: Colors.black.withAlpha(180),
    child: const Icon(
      Icons.arrow_upward,
      color: Colors.white,
    ),
  ),

實(shí)現(xiàn)效果如下。

PageController 還有如下控制翻頁(yè)的方法：

• jumpToPage：跳轉(zhuǎn)到指定頁(yè)面，但是沒有動(dòng)畫。注意這里不會(huì)校驗(yàn)頁(yè)碼是否會(huì)超出范圍。
• nextPage：滑動(dòng)到下一頁(yè)，實(shí)際上調(diào)用的是 animateToPage 方法。
• previousPage：滑動(dòng)到上一頁(yè)，實(shí)際上調(diào)用的是 animateToPage 方法。

總結(jié)

本篇介紹了 Flutter 的翻頁(yè)組件 PageView 的使用，通過(guò) PageView 可以輕松實(shí)現(xiàn)類似短視頻的縱向上滑翻頁(yè)的效果，也可以實(shí)現(xiàn)橫向翻頁(yè)效果（如閱讀類軟件）。在接下來(lái)的系列文章中，本專欄將會(huì)介紹更多 Flutter 實(shí)用的組件。

本篇源碼已上傳至：實(shí)用組件相關(guān)代碼

到此這篇關(guān)于使用 Flutter短視頻上滑翻頁(yè)效果的文章就介紹到這了,更多相關(guān)Flutter短視頻上滑翻頁(yè)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論