Flutter~getx库学习

今天学习下Flutter中state管理的第三方getx.
其中,get: 3.26.0

官方文档

例子展示tabbar、state管理、国际化、跳转.

效果如图

各文件如下

main.dart

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import './languages.dart';
import 'routes/app_pages.dart';
import 'routes/app_routes.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      translations: Languages(), // 你的翻译
      locale: Locale('zh', 'CN'), // 将会按照此处指定的语言翻译
      fallbackLocale: Locale('en', 'US'), // 添加一个回调语言选项，以备上面指定的语言翻译不存在
      initialRoute: AppRoutes.DASHBOARD,
      getPages: AppPages.list,
      debugShowCheckedModeBanner: false,
      themeMode: ThemeMode.system,
    );
  }
}

main.dart是入口文件.

languages.dart

import 'package:get/get.dart';

class Languages extends Translations {
  @override
  Map<String, Map<String, String>> get keys => {
        'zh_CN': {
          'hello': '你好 世界',
          'one': '首页',
          'two': '我的',
        },
        'en_US': {
          'hello': 'Hello World',
          'one': 'Home',
          'two': 'Mine',
        }
      };
}

languages.dart文件是国际化的配置文件.

routes文件夹下:

routes -> app_pages.dart

import 'package:get/get.dart';
import 'package:getx_demo/pages/dashboard/dashboard_binding.dart';
import 'package:getx_demo/pages/dashboard/dashboard_page.dart';

import 'app_routes.dart';

class AppPages {
  static var list = [
    GetPage(
      name: AppRoutes.DASHBOARD,
      page: () => DashboardPage(),
      binding: DashboardBinding(),
    ),
  ];
}

routes -> app_routes.dart

class AppRoutes {
  static const String DASHBOARD = '/';
}

pages文件夹如下:
先是tabbar

dashboard -> dashboard_binding.dart

import 'package:get/get.dart';
import 'package:getx_demo/pages/account/account_controller.dart';
import 'package:getx_demo/pages/home/home_controller.dart';
import 'dashboard_controller.dart';

class DashboardBinding extends Bindings {
  @override
  void dependencies() {
    Get.lazyPut<DashboardController>(() => DashboardController());
    Get.lazyPut<HomeController>(() => HomeController());
    Get.lazyPut<AccountController>(() => AccountController());
  }
}

dashboard -> dashboard_controller.dart

import 'package:get/get.dart';

class DashboardController extends GetxController {
  var tabIndex = 0;

  void changeTabIndex(int index) {
    tabIndex = index;
    update();
  }
}

dashboard -> dashboard_page.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:getx_demo/pages/account/account_page.dart';
import 'package:getx_demo/pages/home/home_page.dart';

import 'dashboard_controller.dart';

class DashboardPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetBuilder<DashboardController>(
      builder: (controller) {
        return Scaffold(
          body: IndexedStack(
            index: controller.tabIndex,
            children: [
              HomePage(),
              AccountPage(),
            ],
          ),
          bottomNavigationBar: BottomNavigationBar(
            unselectedItemColor: Colors.black,
            selectedItemColor: Colors.redAccent,
            onTap: controller.changeTabIndex,
            currentIndex: controller.tabIndex,
            // showSelectedLabels: false,
            // showUnselectedLabels: false,
            // type: BottomNavigationBarType.fixed,
            backgroundColor: Colors.white,
            elevation: 0,
            items: [
              _bottomNavigationBarItem(
                icon: CupertinoIcons.home,
                title: Text('one'.tr),
              ),
              _bottomNavigationBarItem(
                icon: CupertinoIcons.person,
                title: Text('two'.tr),
              ),
            ],
          ),
        );
      },
    );
  }

  _bottomNavigationBarItem({IconData icon, Widget title}) {
    return BottomNavigationBarItem(icon: Icon(icon), title: title);
  }
}

第一个Tab:home

home -> home_controller.dart

import 'package:get/get.dart';

class HomeController extends GetxController {
  final String title = 'Home Title';
  var lgroupValue = '中文'.obs;
  void changeValue(value) {
    lgroupValue.value = value;
  }
}

home -> home_page.dart

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'home_controller.dart';

class HomePage extends GetView<HomeController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('首页'),
      ),
      body: ListView(
        children: [
          Text(
            'hello'.tr,
            style: TextStyle(fontSize: 20),
          ),
          RadioListTile(
            value: '中文',
            groupValue: controller.lgroupValue.toString(),
            title: Text('中文'),
            onChanged: (type) {
              var locale = Locale('zh', 'CN');
              Get.updateLocale(locale);
              controller.changeValue('中文');
            },
          ),
          RadioListTile(
            value: '英文',
            groupValue: controller.lgroupValue.toString(),
            title: Text('英文'),
            onChanged: (type) {
              var locale = Locale('en', 'US');
              Get.updateLocale(locale);
              controller.changeValue('英文');
            },
          )
        ],
      ),
    );
  }
}

再是第二个Tab:account

account -> account_controller.dart

import 'package:get/get.dart';

class AccountController extends GetxController {
  var counter = 0.obs;
  String name = '名字';
  int age = 18;

  void increaseCounter() {
    counter.value += 1;
  }
}

account -> account_page.dart

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:getx_demo/pages/account/second/second_page.dart';

import 'account_controller.dart';

class AccountPage extends GetView<AccountController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('个人'),
      ),
      body: Container(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Obx(
                () => Text("结果 ${controller.counter.value}"),
              ),
              InkWell(
                onTap: () => controller.increaseCounter(),
                child: Text(
                  '加1',
                  style: TextStyle(color: Colors.red, fontSize: 20),
                ),
              ),
              InkWell(
                onTap: () {
                  Get.to(
                    () => SecondPage(
                      name: controller.name,
                      age: controller.age,
                    ),
                  );
                },
                child: Text('跳转二级'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

接下来,是account下的二级界面:second

account -> second_page.dart

import 'package:flutter/material.dart';
import 'package:get/get.dart';

import '../account_controller.dart';

class SecondPage extends GetView<AccountController> {
  final String name;
  final int age;

  SecondPage({Key key, @required this.name, this.age});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('二级'),
      ),
      body: Container(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Text(
                '参数--' + this.name + this.age.toString(),
              ),
              Obx(
                () => Text("结果 ${controller.counter.value}"),
              ),
              InkWell(
                onTap: () => controller.increaseCounter(),
                child: Text(
                  '加1',
                  style: TextStyle(color: Colors.red, fontSize: 20),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

源码

另外:其他管理库学习

另外:Flutter学习demo