flutter簡單使用

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

前言

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

一、布局介紹

二、本地圖片使用

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

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

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

1，json.decode() 方法會將 String類型數(shù)據(jù)解析成Map數(shù)據(jù)結(jié)構(gòu)：Map<String, dynamic>, 取數(shù)據(jù)的格式為object[key]。
如： List items=response.data[“data”]; //response.data 接口返回數(shù)據(jù)
string name=response.data[“name”];
2，https://javiercbk.github.io/json_to_dart/ 將json數(shù)據(jù)在線生成Json實體類的地址。
使用：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ù)”)));
接收：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ù)”)));
接收： result.then((res) {
setState(() { //setState是一個監(jiān)聽的方法 res是返回來的參數(shù)
_handleMessage = res;
});});
返回：Navigator.of(context).pop(“這是返回攜帶的參數(shù)”);

五、插件的使用

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

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

前言

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

PageView 組件介紹

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

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,
  }) 

其中常用的屬性說明如下：

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

使用示例

PageView 使用起來非常簡單，我們先定義一個PageView 翻頁的內(nèi)容組件，簡單地將接收的圖片文件滿屏顯示。代碼如下，實際應(yīng)用的時候可以根據(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,
      ),
    );
  }
}

之后是定義一個 PageViewDemo 來應(yīng)用 PageView 翻頁應(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'),
        ],
      ),
    );
  }
}

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

PageController 應(yīng)用

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

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,
    ),
  ),

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

PageController 還有如下控制翻頁的方法：

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

總結(jié)

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

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

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

最新評論