Support Chinese README

hacktons · May 15, 2020 · 340404f · 340404f
1 parent 4aba9b5
commit 340404f
Show file tree

Hide file tree

Showing 3 changed files with 251 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,8 @@
+## [TODO]
+
+* Add new API to hook internal styles. Checkout `StyleProvider` for details;
+* Provide configuration to hide Text widget when label is empty;
+
 ## [2.1.1]
 
 * Fix ChipBuilder missing issue;

diff --git a/README-zh.md b/README-zh.md
@@ -0,0 +1,193 @@
+![preview](doc/preview.png)
+
+语言: [English](README.md)|[简体中文](README-zh.md)
+# convex_bottom_bar
+
+[![Pub](https://img.shields.io/pub/v/convex_bottom_bar.svg)](https://pub.dartlang.org/packages/convex_bottom_bar)
+[![github](https://img.shields.io/badge/platform-flutter-ff69b4.svg)](https://github.com/hacktons/convex_bottom_bar)
+[![Codemagic build status](https://api.codemagic.io/apps/5db10f597d3edb001a6ede16/5db10f597d3edb001a6ede15/status_badge.svg)](https://codemagic.io/apps/5db10f597d3edb001a6ede16/5db10f597d3edb001a6ede15/latest_build)
+[![Coverage Status](https://coveralls.io/repos/github/hacktons/convex_bottom_bar/badge.svg)](https://coveralls.io/github/hacktons/convex_bottom_bar)
+
+<a href="https://flutter.dev/docs/development/packages-and-plugins/favorites">
+<img height="128" src="doc/flutter-favorite.png">
+</a>
+
+**convex_bottom_bar 现在是一个 [Flutter Favorite](https://flutter.dev/docs/development/packages-and-plugins/favorites) 插件库!**
+
+官方的BottomAppBar只能显示带有凹形FAB的导航栏，有时我们需要凸形FAB。 ConvexAppBar的开发受BottomAppBar和NotchShape的实现启发。
+
+可以在[https://appbar.codemagic.app](https://appbar.codemagic.app)上找到在线示例。
+
+以下是一些支持的预定义样式：
+|            **fixed**             |            **react**             |
+| :------------------------------: | :------------------------------: |
+|    ![](doc/appbar-fixed.gif)     |    ![](doc/appbar-react.gif)     |
+|         **fixedCircle**          |         **reactCircle**       |
+| ![](doc/appbar-fixed-circle.gif) | ![](doc/appbar-react-circle.gif) |
+|            **flip**              |          **titled**          |
+|       ![](doc/appbar-flip.gif)   |    ![](doc/appbar-titled.gif)    |
+|            **textIn**            |   **tab image**          |
+| ![](doc/appbar-textIn.gif)  |    ![](doc/appbar-image.gif)    |
+|      **gradient backgound**    |      **badge chip**         |
+|   ![](doc/appbar-gradient.gif)   |    ![](doc/appbar-badge.gif)    |
+
+
+## 快速上手
+
+通常ConvexAppBar可以通过设置bottomNavigationBar与Scaffold一起使用。
+
+ConvexAppBar具有两个构造函数，ConvexAppBar()将使用默认样式来简化选项卡的创建。
+
+将此添加到您程序包的pubspec.yaml文件中，注意使用最新版本[![Pub](https://img.shields.io/pub/v/convex_bottom_bar.svg)](https://pub.dartlang.org/packages/convex_bottom_bar):
+
+```yaml
+dependencies:
+  convex_bottom_bar: ^latest_version
+```
+
+```dart
+import 'package:convex_bottom_bar/convex_bottom_bar.dart';
+
+Scaffold(
+  bottomNavigationBar: ConvexAppBar(
+    items: [
+      TabItem(icon: Icons.home, title: 'Home'),
+      TabItem(icon: Icons.map, title: 'Discovery'),
+      TabItem(icon: Icons.add, title: 'Add'),
+      TabItem(icon: Icons.message, title: 'Message'),
+      TabItem(icon: Icons.people, title: 'Profile'),
+    ],
+    initialActiveIndex: 2,//optional, default as 0
+    onTap: (int i) => print('click index=$i'),
+  )
+);
+```
+## 功能
+
+* 提供多种内部样式
+* 能够更改AppBar的主题
+* 提供Builder API以自定义新样式
+* 在AppBar上添加徽章
+* 支持优雅的过渡动画
+* 提供Hook API来重载一些内部样式
+
+## Table of contents
+
+- [角标](#角标)
+
+- [主题](#主题)
+
+- [自定义样例](#自定义样例)
+
+- [样式重载](#样式重载)
+
+- [常见问题](#常见问题)
+
+- [贡献](#贡献)
+
+## 角标
+如果需要在标签上添加徽章，请使用`ConvexAppBar.badge`来构建。
+[![badge demo](doc/badge-demo-preview.gif)](doc/badge-demo.mp4 "badge demo")
+
+```dart
+ConvexAppBar.badge({0: '99+', 1: Icons.assistant_photo, 2: Colors.redAccent},
+  items: [
+    TabItem(icon: Icons.home, title: 'Home'),
+    TabItem(icon: Icons.map, title: 'Discovery'),
+    TabItem(icon: Icons.add, title: 'Add'),
+  ],
+  onTap: (int i) => print('click index=$i'),
+);
+```
+
+`badge()`方法接受一个角标数组； 角标是带有选项卡项的映射，每个条目的值可以是String，IconData，Color或Widget。
+
+## 主题
+AppBar默认使用内置样式，您可能需要为其设置主题。 以下是一些支持的属性：
+
+![](doc/appbar-theming.png)
+
+| Attributes      | Description                           |
+| --------------- | ------------------------------------- |
+| backgroundColor | AppBar 背景                     |
+| gradient        | 渐变属性，可以覆盖backgroundColor|
+| height          | AppBar 高度                         |
+| color           | icon/text 的颜色值                   |
+| activeColor     | icon/text 的**选中态**颜色值 |
+| curveSize       | 凸形大小             |
+| top   | 凸形到AppBar上边缘的距离 |
+| style | 支持的样式: **fixed, fixedCircle, react, reactCircle**, ... |
+| chipBuilder | 角标构造器builder,  **ConvexAppBar.badge**会使用默认样式 |
+
+![](doc/appbar-demo.gif)
+
+## 自定义样例
+
+如果默认样式与您的情况不符，请尝试使用`ConvexAppBar.builder()`，它可以让您自定义几乎所有选项卡功能。
+```dart
+Scaffold(
+  bottomNavigationBar: ConvexAppBar.builder(
+    count: 5,
+    backgroundColor: Colors.blue,
+    style: TabStyle.fixed,
+    itemBuilder: Builder(),
+  )
+);
+
+/*user defined class*/
+class Builder extends DelegateBuilder {
+  @override
+  Widget build(BuildContext context, int index, bool active) {
+    return Text('TAB $index');
+  }
+}
+```
+
+完整的自定义示例可以在[example](example)中找到。
+
+## 样式重载
+重载Tab内置样式。 该API与`ConvexAppBar.builder`不同，为了满足您可能需要更新选项卡样式而不定义新的选项卡样式。
+**温馨提示:**  
+则此Hook能力是有限的，如果您提供的尺寸与内部样式不匹配，并且可能导致`overflow broken`。
+
+```dart
+StyleProvider(
+  style: Style(),
+  child: ConvexAppBar(
+    initialActiveIndex: 1,
+    height: 50,
+    top: -30,
+    curveSize: 100,
+    style: TabStyle.fixedCircle,
+    items: [
+      TabItem(icon: Icons.link),
+      TabItem(icon: Icons.import_contacts),
+      TabItem(title: "2020", icon: Icons.work),
+    ],
+    backgroundColor: _tabBackgroundColor,
+  ),
+)
+class Style extends StyleHook {
+  @override
+  double get activeIconSize => 40;
+
+  @override
+  double get activeIconMargin => 10;
+
+  @override
+  double get iconSize => 20;
+
+  @override
+  TextStyle textStyle(Color color) {
+    return TextStyle(fontSize: 20, color: color);
+  }
+}
+```
+## 常见问题
+
+* [动态修改选中的TAB](doc/issue-change-active-tab-index.md)
+* [如何给TAB添加图片而不是ICON](doc/issue-image-for-actionitem.md)
+* [如何移除AppBar的边缘阴影](doc/issue-remove-elevation.md) 
+
+## 贡献
+如您在使用过程中有新功能建议或者遇到问题，请移步至[issue tracker](https://github.com/hacktons/convex_bottom_bar/issues)提交。
diff --git a/README.md b/README.md
@@ -1,5 +1,6 @@
 ![preview](doc/preview.png)
 
+Languages: [English](README.md)|[简体中文](README-zh.md)
 # convex_bottom_bar
 
 [![Pub](https://img.shields.io/pub/v/convex_bottom_bar.svg)](https://pub.dartlang.org/packages/convex_bottom_bar)
@@ -61,7 +62,14 @@ Scaffold(
   )
 );
 ```
-
+## Features
+* Provide multiple internal styles
+* Ability to change the theme of AppBar
+* Provide builder API to customize new style
+* Add badge on tab menu
+* Elegant transition animation
+* Provide hook API to override some of internal styles
+
 ## Table of contents
 
 - [Badge](#badge)
@@ -70,9 +78,11 @@ Scaffold(
 
 - [Custom Example](#custom-example)
 
-- [Contribution](#contribution)
+- [Style Hook](#style-hook)
 
-- [Help](#help)
+- [FAQ](#faq)
+
+- [Contribution](#contribution)
 
 ## Badge
 If you need to add badge on the tab, use `ConvexAppBar.badge` to get it done. 
@@ -136,14 +146,50 @@ class Builder extends DelegateBuilder {
 
 Full custom example can be found at [example](example). 
 
+## Style Hook
+Hook for internal tab style. Unlike the `ConvexAppBar.builder`, you may want to update the tab style without define a new tab style.
+
+**Warning:**  
+This hook is limited, and can lead to `overflow broken` if the size you provide does no match with internal style.
+
+```dart
+StyleProvider(
+  style: Style(),
+  child: ConvexAppBar(
+    initialActiveIndex: 1,
+    height: 50,
+    top: -30,
+    curveSize: 100,
+    style: TabStyle.fixedCircle,
+    items: [
+      TabItem(icon: Icons.link),
+      TabItem(icon: Icons.import_contacts),
+      TabItem(title: "2020", icon: Icons.work),
+    ],
+    backgroundColor: _tabBackgroundColor,
+  ),
+)
+class Style extends StyleHook {
+  @override
+  double get activeIconSize => 40;
+
+  @override
+  double get activeIconMargin => 10;
+
+  @override
+  double get iconSize => 20;
+
+  @override
+  TextStyle textStyle(Color color) {
+    return TextStyle(fontSize: 20, color: color);
+  }
+}
+```
 ## FAQ
 
 * [Change active tab index programmaticlly](doc/issue-change-active-tab-index.md)
 * [Using an image instead of an icon for actionItem](doc/issue-image-for-actionitem.md)
 * [Is there anyway to remove elevation in the bottom bar?](doc/issue-remove-elevation.md) 
 
 ## Contribution
-Please file feature requests and bugs at the [issue tracker](https://github.com/hacktons/convex_bottom_bar/issues).
-
-## Help
-For more detail, please refer to the [example](example) project.
+Please file feature requests and bugs at the [issue tracker](https://github.com/hacktons/convex_bottom_bar/issues).