BetterAndroid/FlexiUI

Fork 0

mirror of https://github.com/BetterAndroid/FlexiUI.git synced 2025-09-07 19:14:12 +08:00

Files

fankesyooni 034d5d1100

docs: update guide

2024-01-19 11:55:23 +08:00

9.4 KiB

Raw Blame History

Flexi UI Documentation (Jetpack Compose)

⚠️ Notice

Flexi UI is still under development and testing, and the API may change before the 1.0.0 version is officially released.

We are welcome you to make suggestions to us at GitHub Issues.

We recommend that you use the Dev Version first, which is actively under development and synchronizes the latest code from the current branch.

Before you start using it, it is recommended that you read this document carefully so that you can better understand how it works and its functions.

You can use it together with BetterAndroid for better results.

Configure Dependency

Flexi UI is divided into two modules: core and resources, normally, you only need to add core, and resources will be automatically introduced as an API.

You can add this module to your project using the following method.

This is a Kotlin Multiplatform dependency, you need the org.jetbrains.kotlin.multiplatform plugin to apply the relevant dependencies.

We recommend using Kotlin DSL as the Gradle build script language and SweetDependency to manage dependencies.

SweetDependency (Recommended)

Add dependencies to your project SweetDependency configuration file.

libraries:
  com.highcapable.flexiui:
    # commonMain
    core:
      version: +
    resources:
      version: +
    # androidMain
    core-android:
      version-ref: <this>::core
    resources-android:
      version-ref: <this>::resources
    # iosArm64Main
    core-iosarm64:
      version-ref: <this>::core
    resources-iosarm64:
      version-ref: <this>::resources
    # iosX64Main
    core-iosx64:
      version-ref: <this>::core
    resources-iosx64:
      version-ref: <this>::resources
    # iosSimulatorArm64Main
    core-iossimulatorarm64:
      version-ref: <this>::core
    resources-iossimulatorarm64:
      version-ref: <this>::resources
    # desktopMain
    core-desktop:
      version-ref: <this>::core
    resources-desktop:
      version-ref: <this>::resources

Configure dependencies in your project build.gradle.kts.

If you use multi-platform dependencies in a regular project, you only need to deploy the corresponding platform suffix dependencies as needed.

implementation(com.highcapable.flexiui.core.android)
implementation(com.highcapable.flexiui.core.iosarm64)
implementation(com.highcapable.flexiui.core.iosx64)
implementation(com.highcapable.flexiui.core.iossimulatorarm64)
implementation(com.highcapable.flexiui.core.desktop)

implementation(com.highcapable.flexiui.resources.android)
implementation(com.highcapable.flexiui.resources.iosarm64)
implementation(com.highcapable.flexiui.resources.iosx64)
implementation(com.highcapable.flexiui.resources.iossimulatorarm64)
implementation(com.highcapable.flexiui.resources.desktop)

If you use multi-platform dependencies in a multi-platform project, you need to add the core dependency in commonMain.

kotlin {
    sourceSets {
        val commonMain by getting {
            dependencies {
                implementation(com.highcapable.flexiui.core)
                implementation(com.highcapable.flexiui.resources)
            }
        }
    }
}

Traditional Method

Configure dependencies in your project build.gradle.kts.

If you use multi-platform dependencies in a regular project, you only need to deploy the corresponding platform suffix dependencies as needed.

implementation("com.highcapable.flexiui:core-android:<version>")
implementation("com.highcapable.flexiui:core-iosarm64:<version>")
implementation("com.highcapable.flexiui:core-iosx64:<version>")
implementation("com.highcapable.flexiui:core-iossimulatorarm64:<version>")
implementation("com.highcapable.flexiui:core-desktop:<version>")

implementation("com.highcapable.flexiui:resources-android:<version>")
implementation("com.highcapable.flexiui:resources-iosarm64:<version>")
implementation("com.highcapable.flexiui:resources-iosx64:<version>")
implementation("com.highcapable.flexiui:resources-iossimulatorarm64:<version>")
implementation("com.highcapable.flexiui:resources-desktop:<version>")

If you use multi-platform dependencies in a multi-platform project, you need to add the core dependency in commonMain.

kotlin {
    sourceSets {
        val commonMain by getting {
            dependencies {
                implementation("com.highcapable.flexiui:core:<version>")
                implementation("com.highcapable.flexiui:resources:<version>")
            }
        }
    }
}

Please change <version> to the version displayed at the top of page.

Dev Version

Each version of Flexi UI has a corresponding dev version (version under development), and its update frequency will be very high.

The documents here may not be synchronized in time according to the latest dev version.

The dev version will only be published in our public repository and will not be synchronized to Maven Central, if you want to use the dev version, please refer to the following method to configure the repository.

SweetDependency (Recommended)

Add the repository in your project's SweetDependency configuration file.

repositories:
  # For details, please go to: https://github.com/HighCapable/maven-repository
  highcapable-maven-snapshots:
    url: https://raw.githubusercontent.com/HighCapable/maven-repository/main/repository/snapshots

Traditional Method

Configure the repository in your project build.gradle.kts.

repositories {
    // For details, please go to: https://github.com/HighCapable/maven-repository
    maven("https://raw.githubusercontent.com/HighCapable/maven-repository/main/repository/snapshots")
}

Demo

You can find some samples here to get a better understanding of how Flexi UI is used by looking at the corresponding demo projects.

Basic Usage

You can initialize a simple app by providing a custom theme through FlexiTheme.

Its usage is basically consistent with MaterialTheme.

The following example

@Composable
fun MyApplicationTheme(content: @Composable () -> Unit) {
    FlexiTheme {
        content()
    }
}

Then use Scaffold to create a basic page.

The following example

MyApplicationTheme {
    Scaffold(
        appBar = {
            PrimaryAppBar(
                title = { Text("My App") }
            )
        }
    ) { innerPadding ->
        Box(
            modifier = Modifier
                .fillMaxSize()
                .padding(innerPadding)
        ) {
            Text("Hello World!")
        }
    }
}

Style Introduction

Flexi UI provides Colors, Shapes, Typography and Sizes (experimental) through which you can modify the global styles of all components.

The following example

FlexiTheme(
    colors = FlexiTheme.colors.copy(
        themePrimary = Color.Blue
    )
) {
    // ...
}

For details, please refer to the Flexi UI design specification document (under development).

Component Introduction

All available components currently provided in Flexi UI are introduced here, you can find detailed usage instructions for each component below.