mirror of
https://github.com/zhuzichu520/FluentUI.git
synced 2025-07-06 18:55:58 +08:00
Compare commits
32 Commits
Author | SHA1 | Date | |
---|---|---|---|
2084b5afa3 | |||
f8d717f41b | |||
be58fc5e7d | |||
1c0bc7208a | |||
d89aaec062 | |||
13abd275b4 | |||
e8460c2409 | |||
6de1b9d78f | |||
64fa2b6370 | |||
8970a0c09a | |||
e7cea72825 | |||
93186edfbe | |||
e60883bc60 | |||
47ab4dabbd | |||
206669e5f0 | |||
08457dc75e | |||
0c59a233ea | |||
fcb8da2c50 | |||
a8701256d4 | |||
8eaa4b6cbb | |||
af80a882d0 | |||
9d89328a43 | |||
0d4477437f | |||
6b3e73ce0b | |||
625bc74e26 | |||
731e4f27b4 | |||
fce64eccc6 | |||
689e0805e7 | |||
986f1242dd | |||
a9c97a5c56 | |||
81e78834d0 | |||
5279a2c7b2 |
19
.github/workflows/macos.yml
vendored
19
.github/workflows/macos.yml
vendored
@ -16,24 +16,23 @@ jobs:
|
|||||||
runs-on: ${{ matrix.os }}
|
runs-on: ${{ matrix.os }}
|
||||||
strategy:
|
strategy:
|
||||||
matrix:
|
matrix:
|
||||||
os: [macos-11.0]
|
os: [macos-12]
|
||||||
qt_ver: [6.4.3]
|
qt_ver: [6.4.3]
|
||||||
qt_arch: [clang_64]
|
qt_arch: [clang_64]
|
||||||
env:
|
env:
|
||||||
targetName: example
|
targetName: example
|
||||||
steps:
|
steps:
|
||||||
# macos 11.0 默认环境变了,要指定
|
- name: '⚙️ Cache Qt'
|
||||||
- name: prepare env
|
id: cache-qt
|
||||||
if: ${{ matrix.os == 'macos-11.0' }}
|
uses: actions/cache@v3
|
||||||
run: |
|
with:
|
||||||
softwareupdate --all --install --force
|
path: ${{ runner.workspace }}/Qt
|
||||||
sudo xcode-select --print-path
|
key: ${{runner.os}}-qtcachedir-${{ matrix.qt_ver }}
|
||||||
sudo xcode-select --switch /Library/Developer/CommandLineTools
|
|
||||||
- name: Install Qt
|
- name: Install Qt
|
||||||
uses: jurplel/install-qt-action@v3
|
uses: jurplel/install-qt-action@v3
|
||||||
with:
|
with:
|
||||||
version: ${{ matrix.qt_ver }}
|
version: ${{ matrix.qt_ver }}
|
||||||
cached: 'false'
|
cache: ${{steps.cache-qt.outputs.cache-hit}}
|
||||||
arch: ${{ matrix.qt_arch }}
|
arch: ${{ matrix.qt_arch }}
|
||||||
modules: 'qt5compat qtmultimedia qtshadertools qtimageformats'
|
modules: 'qt5compat qtmultimedia qtshadertools qtimageformats'
|
||||||
- uses: actions/checkout@v2
|
- uses: actions/checkout@v2
|
||||||
@ -60,6 +59,6 @@ jobs:
|
|||||||
with:
|
with:
|
||||||
repo_token: ${{ secrets.GITHUB_TOKEN }}
|
repo_token: ${{ secrets.GITHUB_TOKEN }}
|
||||||
file: bin/release/${{ env.targetName }}.dmg
|
file: bin/release/${{ env.targetName }}.dmg
|
||||||
asset_name: ${{ env.targetName }}_${{ matrix.os }}_${{ matrix.qt_ver }}.dmg
|
asset_name: ${{ env.targetName }}_${{ github.ref_name }}_${{ matrix.os }}_Qt${{ matrix.qt_ver }}.dmg
|
||||||
tag: ${{ github.ref }}
|
tag: ${{ github.ref }}
|
||||||
overwrite: true
|
overwrite: true
|
12
.github/workflows/ubuntu.yml
vendored
12
.github/workflows/ubuntu.yml
vendored
@ -24,11 +24,17 @@ jobs:
|
|||||||
env:
|
env:
|
||||||
targetName: example
|
targetName: example
|
||||||
steps:
|
steps:
|
||||||
|
- name: '⚙️ Cache Qt'
|
||||||
|
id: cache-qt
|
||||||
|
uses: actions/cache@v3
|
||||||
|
with:
|
||||||
|
path: ${{ runner.workspace }}/Qt
|
||||||
|
key: ${{runner.os}}-qtcachedir-${{ matrix.qt_ver }}
|
||||||
- name: Install Qt
|
- name: Install Qt
|
||||||
uses: jurplel/install-qt-action@v3
|
uses: jurplel/install-qt-action@v3
|
||||||
with:
|
with:
|
||||||
version: ${{ matrix.qt_ver }}
|
version: ${{ matrix.qt_ver }}
|
||||||
cached: 'false'
|
cache: ${{steps.cache-qt.outputs.cache-hit}}
|
||||||
arch: ${{ matrix.qt_arch }}
|
arch: ${{ matrix.qt_arch }}
|
||||||
modules: 'qt5compat qtmultimedia qtshadertools qtimageformats'
|
modules: 'qt5compat qtmultimedia qtshadertools qtimageformats'
|
||||||
- name: ubuntu install GL library
|
- name: ubuntu install GL library
|
||||||
@ -44,6 +50,8 @@ jobs:
|
|||||||
uses: miurahr/install-linuxdeploy-action@v1
|
uses: miurahr/install-linuxdeploy-action@v1
|
||||||
with:
|
with:
|
||||||
plugins: qt appimage
|
plugins: qt appimage
|
||||||
|
- name: Check if svg file exists
|
||||||
|
run: if [ ! -f "${targetName}.svg" ]; then echo "File not found, creating..."; touch ${targetName}.svg; fi
|
||||||
# 打包
|
# 打包
|
||||||
- name: package
|
- name: package
|
||||||
run: |
|
run: |
|
||||||
@ -64,6 +72,6 @@ jobs:
|
|||||||
with:
|
with:
|
||||||
repo_token: ${{ secrets.GITHUB_TOKEN }}
|
repo_token: ${{ secrets.GITHUB_TOKEN }}
|
||||||
file: ${{ env.targetName }}.AppImage
|
file: ${{ env.targetName }}.AppImage
|
||||||
asset_name: ${{ env.targetName }}_${{ matrix.os }}_${{ matrix.qt_ver }}.AppImage
|
asset_name: ${{ env.targetName }}_${{ github.ref_name }}_${{ matrix.os }}_Qt${{ matrix.qt_ver }}.AppImage
|
||||||
tag: ${{ github.ref }}
|
tag: ${{ github.ref }}
|
||||||
overwrite: true
|
overwrite: true
|
76
.github/workflows/windows-mingw.yml
vendored
Normal file
76
.github/workflows/windows-mingw.yml
vendored
Normal file
@ -0,0 +1,76 @@
|
|||||||
|
name: Windows MinGW
|
||||||
|
on:
|
||||||
|
push:
|
||||||
|
paths:
|
||||||
|
- '*.pro'
|
||||||
|
- 'src/**'
|
||||||
|
- '.github/workflows/windows-mingw.yml'
|
||||||
|
pull_request:
|
||||||
|
paths:
|
||||||
|
- '*.pro'
|
||||||
|
- 'src/**'
|
||||||
|
- '.github/workflows/windows-mingw.yml'
|
||||||
|
jobs:
|
||||||
|
build:
|
||||||
|
name: Build
|
||||||
|
runs-on: windows-2022
|
||||||
|
strategy:
|
||||||
|
matrix:
|
||||||
|
include:
|
||||||
|
- qt_arch: win64_mingw
|
||||||
|
qt_ver: 6.4.3
|
||||||
|
qt_tools: "tools_mingw,9.0.0-1-202203221220,qt.tools.win64_mingw900"
|
||||||
|
qt_tools_mingw_install: mingw900_64
|
||||||
|
env:
|
||||||
|
targetName: example.exe
|
||||||
|
fileName: example
|
||||||
|
steps:
|
||||||
|
- name: Install Qt
|
||||||
|
uses: jurplel/install-qt-action@v3
|
||||||
|
with:
|
||||||
|
version: ${{ matrix.qt_ver }}
|
||||||
|
arch: ${{ matrix.qt_arch }}
|
||||||
|
cache: ${{steps.cache-qt.outputs.cache-hit}}
|
||||||
|
modules: 'qt5compat qtmultimedia qtshadertools qtimageformats'
|
||||||
|
- uses: actions/checkout@v2
|
||||||
|
with:
|
||||||
|
fetch-depth: 1
|
||||||
|
- name: Qt6 environment configuration
|
||||||
|
if: ${{ startsWith( matrix.qt_ver, 6 ) }}
|
||||||
|
shell: pwsh
|
||||||
|
run: |
|
||||||
|
Write-Output "${{ env.Qt6_DIR }}/bin" | Out-File -FilePath $env:GITHUB_PATH -Encoding utf8 -Append
|
||||||
|
Write-Output "${{ env.Qt6_DIR }}/../../Tools/${{ matrix.qt_tools_mingw_install }}/bin" | Out-File -FilePath $env:GITHUB_PATH -Encoding utf8 -Append
|
||||||
|
- name: where is qmake & where is mingw32-make
|
||||||
|
shell: pwsh
|
||||||
|
run: |
|
||||||
|
Get-Command -Name 'qmake' | Format-List
|
||||||
|
Get-Command -Name 'mingw32-make' | Format-List
|
||||||
|
- name: mingw-build
|
||||||
|
id: build
|
||||||
|
shell: cmd
|
||||||
|
run: |
|
||||||
|
qmake
|
||||||
|
mingw32-make
|
||||||
|
- name: package
|
||||||
|
id: package
|
||||||
|
env:
|
||||||
|
archiveName: ${{ env.fileName }}-${{ matrix.qt_arch }}-${{ matrix.qt_ver }}
|
||||||
|
shell: pwsh
|
||||||
|
run: |
|
||||||
|
& scripts\windows-mingw-publish.ps1 ${env:archiveName} ${env:targetName}
|
||||||
|
$name = ${env:archiveName}
|
||||||
|
echo "::set-output name=packageName::$name"
|
||||||
|
- uses: actions/upload-artifact@v2
|
||||||
|
with:
|
||||||
|
name: ${{ steps.package.outputs.packageName }}
|
||||||
|
path: ${{ steps.package.outputs.packageName }}
|
||||||
|
- name: uploadRelease
|
||||||
|
if: startsWith(github.event.ref, 'refs/tags/')
|
||||||
|
uses: svenstaro/upload-release-action@v2
|
||||||
|
with:
|
||||||
|
repo_token: ${{ secrets.GITHUB_TOKEN }}
|
||||||
|
file: ${{ steps.package.outputs.packageName }}.zip
|
||||||
|
asset_name: ${{ env.fileName }}_${{ github.ref_name }}_${{ matrix.qt_arch }}_Qt${{ matrix.qt_ver }}.zip
|
||||||
|
tag: ${{ github.ref }}
|
||||||
|
overwrite: true
|
13
.github/workflows/windows.yml
vendored
13
.github/workflows/windows.yml
vendored
@ -16,10 +16,11 @@ jobs:
|
|||||||
name: Build
|
name: Build
|
||||||
# 运行平台, windows-latest目前是windows server 2019
|
# 运行平台, windows-latest目前是windows server 2019
|
||||||
# 参考文档 https://github.com/actions/virtual-environments/blob/main/images/win/Windows2019-Readme.md
|
# 参考文档 https://github.com/actions/virtual-environments/blob/main/images/win/Windows2019-Readme.md
|
||||||
runs-on: windows-2019
|
runs-on: ${{ matrix.os }}
|
||||||
strategy:
|
strategy:
|
||||||
# 矩阵配置
|
# 矩阵配置
|
||||||
matrix:
|
matrix:
|
||||||
|
os: [windows-2019]
|
||||||
include:
|
include:
|
||||||
- qt_ver: 6.4.3
|
- qt_ver: 6.4.3
|
||||||
qt_arch: win64_msvc2019_64
|
qt_arch: win64_msvc2019_64
|
||||||
@ -30,6 +31,12 @@ jobs:
|
|||||||
fileName: example
|
fileName: example
|
||||||
# 步骤
|
# 步骤
|
||||||
steps:
|
steps:
|
||||||
|
- name: '⚙️ Cache Qt'
|
||||||
|
id: cache-qt
|
||||||
|
uses: actions/cache@v3
|
||||||
|
with:
|
||||||
|
path: ${{ runner.workspace }}\Qt
|
||||||
|
key: ${{runner.os}}-qtcachedir-${{ matrix.qt_ver }}
|
||||||
# 安装Qt
|
# 安装Qt
|
||||||
- name: Install Qt
|
- name: Install Qt
|
||||||
# 使用外部action。这个action专门用来安装Qt
|
# 使用外部action。这个action专门用来安装Qt
|
||||||
@ -37,7 +44,7 @@ jobs:
|
|||||||
with:
|
with:
|
||||||
version: ${{ matrix.qt_ver }}
|
version: ${{ matrix.qt_ver }}
|
||||||
arch: ${{ matrix.qt_arch }}
|
arch: ${{ matrix.qt_arch }}
|
||||||
cached: 'false'
|
cache: ${{steps.cache-qt.outputs.cache-hit}}
|
||||||
modules: 'qt5compat qtmultimedia qtshadertools qtimageformats'
|
modules: 'qt5compat qtmultimedia qtshadertools qtimageformats'
|
||||||
# 拉取代码
|
# 拉取代码
|
||||||
- uses: actions/checkout@v2
|
- uses: actions/checkout@v2
|
||||||
@ -80,6 +87,6 @@ jobs:
|
|||||||
with:
|
with:
|
||||||
repo_token: ${{ secrets.GITHUB_TOKEN }}
|
repo_token: ${{ secrets.GITHUB_TOKEN }}
|
||||||
file: ${{ steps.package.outputs.packageName }}.zip
|
file: ${{ steps.package.outputs.packageName }}.zip
|
||||||
asset_name: ${{ steps.package.outputs.packageName }}.zip
|
asset_name: ${{ env.fileName }}_${{ github.ref_name }}_${{ matrix.qt_arch }}_Qt${{ matrix.qt_ver }}.zip
|
||||||
tag: ${{ github.ref }}
|
tag: ${{ github.ref }}
|
||||||
overwrite: true
|
overwrite: true
|
@ -1,4 +1,5 @@
|
|||||||
cmake_minimum_required(VERSION 3.16)
|
cmake_minimum_required(VERSION 3.16)
|
||||||
project(FluentUI VERSION 0.1 LANGUAGES CXX)
|
project(FluentUI VERSION 0.1 LANGUAGES CXX)
|
||||||
|
|
||||||
add_subdirectory(src)
|
add_subdirectory(src)
|
||||||
add_subdirectory(example)
|
add_subdirectory(example)
|
||||||
|
@ -7,6 +7,18 @@ set(CMAKE_AUTOUIC ON)
|
|||||||
|
|
||||||
set(CMAKE_CXX_STANDARD 17)
|
set(CMAKE_CXX_STANDARD 17)
|
||||||
|
|
||||||
|
if(CMAKE_SIZEOF_VOID_P EQUAL 8)
|
||||||
|
set(platform 64)
|
||||||
|
else()
|
||||||
|
set(platform 32)
|
||||||
|
endif()
|
||||||
|
|
||||||
|
if(CMAKE_BUILD_TYPE STREQUAL "Debug")
|
||||||
|
set(CMAKE_RUNTIME_OUTPUT_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR}/../bin/debug)
|
||||||
|
else()
|
||||||
|
set(CMAKE_RUNTIME_OUTPUT_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR}/../bin/release)
|
||||||
|
endif()
|
||||||
|
|
||||||
find_package(Qt6 COMPONENTS Core Quick QuickControls2 Concurrent Network Multimedia REQUIRED)
|
find_package(Qt6 COMPONENTS Core Quick QuickControls2 Concurrent Network Multimedia REQUIRED)
|
||||||
|
|
||||||
set(SOURCES
|
set(SOURCES
|
||||||
@ -28,21 +40,26 @@ set(RC_ICONS
|
|||||||
|
|
||||||
qt_add_resources(QT_RESOURCES ${RESOURCES})
|
qt_add_resources(QT_RESOURCES ${RESOURCES})
|
||||||
|
|
||||||
|
add_executable(${PROJECT_NAME} ${SOURCES} ${HEADERS} ${QT_RESOURCES} ${RC_ICONS})
|
||||||
|
|
||||||
if(WIN32)
|
if(WIN32)
|
||||||
if(QT_ARCH EQUAL 32)
|
if(CMAKE_C_COMPILER_ID STREQUAL "MSVC")
|
||||||
set(COPYDLL ${CMAKE_CURRENT_SOURCE_DIR}/../third/Win_x86/*.dll ${DESTDIR})
|
file(GLOB DLL_FILES ${CMAKE_CURRENT_SOURCE_DIR}/../third/msvc/*.dll)
|
||||||
|
add_custom_command(TARGET ${PROJECT_NAME} POST_BUILD
|
||||||
|
COMMAND ${CMAKE_COMMAND} -E copy
|
||||||
|
${DLL_FILES}
|
||||||
|
${CMAKE_RUNTIME_OUTPUT_DIRECTORY}
|
||||||
|
)
|
||||||
else()
|
else()
|
||||||
set(COPYDLL ${CMAKE_CURRENT_SOURCE_DIR}/../third/Win_x64/*.dll ${DESTDIR})
|
file(GLOB DLL_FILES ${CMAKE_CURRENT_SOURCE_DIR}/../third/mingw/*.dll)
|
||||||
endif()
|
add_custom_command(TARGET ${PROJECT_NAME} POST_BUILD
|
||||||
if(QMAKE_CC STREQUAL "cl")
|
COMMAND ${CMAKE_COMMAND} -E copy
|
||||||
set(QMAKE_PRE_LINK "${QMAKE_COPY} ${COPYDLL}")
|
${DLL_FILES}
|
||||||
else()
|
${CMAKE_RUNTIME_OUTPUT_DIRECTORY}
|
||||||
set(QMAKE_PRE_LINK "${QMAKE_COPY} ${COPYDLL}")
|
)
|
||||||
endif()
|
endif()
|
||||||
endif()
|
endif()
|
||||||
|
|
||||||
add_executable(${PROJECT_NAME} ${SOURCES} ${HEADERS} ${QT_RESOURCES} ${RC_ICONS})
|
|
||||||
|
|
||||||
target_compile_definitions(${PROJECT_NAME} PRIVATE
|
target_compile_definitions(${PROJECT_NAME} PRIVATE
|
||||||
QT_DEPRECATED_WARNINGS
|
QT_DEPRECATED_WARNINGS
|
||||||
QT_NO_WARNING_OUTPUT
|
QT_NO_WARNING_OUTPUT
|
||||||
|
@ -67,7 +67,6 @@ FluContentPage {
|
|||||||
width:parent.width
|
width:parent.width
|
||||||
wrapMode: Text.WrapAnywhere
|
wrapMode: Text.WrapAnywhere
|
||||||
text: modelData.name
|
text: modelData.name
|
||||||
|
|
||||||
horizontalAlignment: Text.AlignHCenter
|
horizontalAlignment: Text.AlignHCenter
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -3,6 +3,7 @@ import QtQuick.Layouts
|
|||||||
import QtQuick.Window
|
import QtQuick.Window
|
||||||
import QtQuick.Controls
|
import QtQuick.Controls
|
||||||
import FluentUI
|
import FluentUI
|
||||||
|
import "./component"
|
||||||
|
|
||||||
FluScrollablePage{
|
FluScrollablePage{
|
||||||
|
|
||||||
@ -11,9 +12,10 @@ FluScrollablePage{
|
|||||||
leftPadding:10
|
leftPadding:10
|
||||||
rightPadding:10
|
rightPadding:10
|
||||||
bottomPadding:20
|
bottomPadding:20
|
||||||
|
spacing: 0
|
||||||
|
|
||||||
FluArea{
|
FluArea{
|
||||||
width: parent.width
|
Layout.fillWidth: true
|
||||||
Layout.topMargin: 20
|
Layout.topMargin: 20
|
||||||
height: 106
|
height: 106
|
||||||
paddings: 10
|
paddings: 10
|
||||||
@ -99,5 +101,19 @@ FluScrollablePage{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
CodeExpander{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
code:'Rectangle{
|
||||||
|
width: 40
|
||||||
|
height: 40
|
||||||
|
radius: 8
|
||||||
|
color: Qt.rgba(191/255,191/255,191/255,1)
|
||||||
|
FluBadge{
|
||||||
|
count: 100
|
||||||
|
isDot: false
|
||||||
|
color: Qt.rgba(82/255,196/255,26/255,1)
|
||||||
|
}
|
||||||
|
}'
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -3,15 +3,15 @@ import QtQuick.Layouts
|
|||||||
import QtQuick.Window
|
import QtQuick.Window
|
||||||
import QtQuick.Controls
|
import QtQuick.Controls
|
||||||
import FluentUI
|
import FluentUI
|
||||||
|
import "./component"
|
||||||
|
|
||||||
FluScrollablePage{
|
FluScrollablePage{
|
||||||
title:"Buttons"
|
title:"Buttons"
|
||||||
|
|
||||||
spacing: 20
|
|
||||||
|
|
||||||
leftPadding:10
|
leftPadding:10
|
||||||
rightPadding:10
|
rightPadding:10
|
||||||
bottomPadding:20
|
bottomPadding:20
|
||||||
|
spacing: 0
|
||||||
|
|
||||||
FluText{
|
FluText{
|
||||||
Layout.topMargin: 20
|
Layout.topMargin: 20
|
||||||
@ -19,9 +19,10 @@ FluScrollablePage{
|
|||||||
}
|
}
|
||||||
|
|
||||||
FluArea{
|
FluArea{
|
||||||
width: parent.width
|
Layout.fillWidth: true
|
||||||
height: 68
|
height: 68
|
||||||
paddings: 10
|
paddings: 10
|
||||||
|
Layout.topMargin: 20
|
||||||
|
|
||||||
FluTextButton{
|
FluTextButton{
|
||||||
disabled:text_button_switch.selected
|
disabled:text_button_switch.selected
|
||||||
@ -48,11 +49,21 @@ FluScrollablePage{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
CodeExpander{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
code:'FluTextButton{
|
||||||
|
text:"Text Button"
|
||||||
|
onClicked: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}'
|
||||||
|
}
|
||||||
|
|
||||||
FluArea{
|
FluArea{
|
||||||
width: parent.width
|
Layout.fillWidth: true
|
||||||
height: 68
|
height: 68
|
||||||
paddings: 10
|
paddings: 10
|
||||||
|
Layout.topMargin: 20
|
||||||
|
|
||||||
FluButton{
|
FluButton{
|
||||||
disabled:button_switch.selected
|
disabled:button_switch.selected
|
||||||
@ -79,10 +90,20 @@ FluScrollablePage{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
CodeExpander{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
code:'FluButton{
|
||||||
|
text:"Standard Button"
|
||||||
|
onClicked: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}'
|
||||||
|
}
|
||||||
|
|
||||||
FluArea{
|
FluArea{
|
||||||
width: parent.width
|
Layout.fillWidth: true
|
||||||
height: 68
|
height: 68
|
||||||
|
Layout.topMargin: 20
|
||||||
paddings: 10
|
paddings: 10
|
||||||
|
|
||||||
FluFilledButton{
|
FluFilledButton{
|
||||||
@ -110,13 +131,63 @@ FluScrollablePage{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
CodeExpander{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
code:'FluFilledButton{
|
||||||
|
text:"Filled Button"
|
||||||
|
onClicked: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}'
|
||||||
|
}
|
||||||
|
|
||||||
|
FluArea{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
height: 68
|
||||||
|
Layout.topMargin: 20
|
||||||
|
paddings: 10
|
||||||
|
|
||||||
|
FluToggleButton{
|
||||||
|
disabled:toggle_button_switch.selected
|
||||||
|
text:"Toggle Button"
|
||||||
|
onClicked: {
|
||||||
|
selected = !selected
|
||||||
|
}
|
||||||
|
anchors{
|
||||||
|
verticalCenter: parent.verticalCenter
|
||||||
|
left: parent.left
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Row{
|
||||||
|
spacing: 5
|
||||||
|
anchors{
|
||||||
|
verticalCenter: parent.verticalCenter
|
||||||
|
right: parent.right
|
||||||
|
}
|
||||||
|
FluToggleSwitch{
|
||||||
|
id:toggle_button_switch
|
||||||
|
Layout.alignment: Qt.AlignRight
|
||||||
|
text:"Disabled"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
CodeExpander{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
code:'FluToggleButton{
|
||||||
|
text:"Toggle Button"
|
||||||
|
onClicked: {
|
||||||
|
selected = !selected
|
||||||
|
}
|
||||||
|
}'
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
FluArea{
|
FluArea{
|
||||||
width: parent.width
|
Layout.fillWidth: true
|
||||||
height: 68
|
height: 68
|
||||||
paddings: 10
|
paddings: 10
|
||||||
|
Layout.topMargin: 20
|
||||||
FluIconButton{
|
FluIconButton{
|
||||||
iconSource:FluentIcons.ChromeCloseContrast
|
iconSource:FluentIcons.ChromeCloseContrast
|
||||||
disabled:icon_button_switch.selected
|
disabled:icon_button_switch.selected
|
||||||
@ -143,12 +214,21 @@ FluScrollablePage{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
CodeExpander{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
code:'FluIconButton{
|
||||||
|
iconSource:FluentIcons.ChromeCloseContrast
|
||||||
|
onClicked: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}'
|
||||||
|
}
|
||||||
|
|
||||||
FluArea{
|
FluArea{
|
||||||
width: parent.width
|
Layout.fillWidth: true
|
||||||
height: 68
|
height: 68
|
||||||
paddings: 10
|
paddings: 10
|
||||||
|
Layout.topMargin: 20
|
||||||
FluDropDownButton{
|
FluDropDownButton{
|
||||||
disabled:drop_down_button_switch.selected
|
disabled:drop_down_button_switch.selected
|
||||||
text:"DropDownButton"
|
text:"DropDownButton"
|
||||||
@ -184,12 +264,32 @@ FluScrollablePage{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
CodeExpander{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
code:'FluDropDownButton{
|
||||||
|
text:"DropDownButton"
|
||||||
|
items:[
|
||||||
|
FluMenuItem{
|
||||||
|
text:"Menu_1"
|
||||||
|
},
|
||||||
|
FluMenuItem{
|
||||||
|
text:"Menu_2"
|
||||||
|
},
|
||||||
|
FluMenuItem{
|
||||||
|
text:"Menu_3"
|
||||||
|
},
|
||||||
|
FluMenuItem{
|
||||||
|
text:"Menu_4"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}'
|
||||||
|
}
|
||||||
|
|
||||||
FluArea{
|
FluArea{
|
||||||
width: parent.width
|
Layout.fillWidth: true
|
||||||
height: 100
|
height: 100
|
||||||
paddings: 10
|
paddings: 10
|
||||||
|
Layout.topMargin: 20
|
||||||
ColumnLayout{
|
ColumnLayout{
|
||||||
spacing: 8
|
spacing: 8
|
||||||
anchors{
|
anchors{
|
||||||
@ -225,13 +325,23 @@ FluScrollablePage{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
CodeExpander{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
code:'FluRadioButton{
|
||||||
|
selected:true
|
||||||
|
text:"Text Button"
|
||||||
|
onClicked: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}'
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
FluArea{
|
FluArea{
|
||||||
width: parent.width
|
Layout.fillWidth: true
|
||||||
height: 68
|
height: 68
|
||||||
paddings: 10
|
paddings: 10
|
||||||
|
Layout.topMargin: 20
|
||||||
FluCheckBox{
|
FluCheckBox{
|
||||||
disabled:check_box_switch.selected
|
disabled:check_box_switch.selected
|
||||||
text:"Check Box"
|
text:"Check Box"
|
||||||
@ -240,8 +350,6 @@ FluScrollablePage{
|
|||||||
left: parent.left
|
left: parent.left
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
Row{
|
Row{
|
||||||
spacing: 5
|
spacing: 5
|
||||||
anchors{
|
anchors{
|
||||||
@ -255,6 +363,10 @@ FluScrollablePage{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
CodeExpander{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
code:'FluCheckBox{
|
||||||
|
text:"Check Box"
|
||||||
|
}'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -3,6 +3,7 @@ import QtQuick.Controls
|
|||||||
import QtQuick.Layouts
|
import QtQuick.Layouts
|
||||||
import QtQuick.Window
|
import QtQuick.Window
|
||||||
import FluentUI
|
import FluentUI
|
||||||
|
import "./component"
|
||||||
|
|
||||||
FluScrollablePage{
|
FluScrollablePage{
|
||||||
|
|
||||||
@ -10,18 +11,25 @@ FluScrollablePage{
|
|||||||
leftPadding:10
|
leftPadding:10
|
||||||
rightPadding:10
|
rightPadding:10
|
||||||
bottomPadding:20
|
bottomPadding:20
|
||||||
|
spacing: 0
|
||||||
|
|
||||||
FluArea{
|
FluArea{
|
||||||
width: parent.width
|
Layout.fillWidth: true
|
||||||
Layout.topMargin: 20
|
Layout.topMargin: 20
|
||||||
height: 350
|
height: 350
|
||||||
paddings: 10
|
paddings: 10
|
||||||
FluCalendarView{
|
FluCalendarView{
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
CodeExpander{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
code:'FluCalendarView{
|
||||||
|
|
||||||
|
}'
|
||||||
|
}
|
||||||
|
|
||||||
FluArea{
|
FluArea{
|
||||||
width: parent.width
|
Layout.fillWidth: true
|
||||||
Layout.topMargin: 20
|
Layout.topMargin: 20
|
||||||
height: 80
|
height: 80
|
||||||
paddings: 10
|
paddings: 10
|
||||||
@ -34,5 +42,11 @@ FluScrollablePage{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
CodeExpander{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
code:'FluCalendarPicker{
|
||||||
|
|
||||||
|
}'
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -3,6 +3,7 @@ import QtQuick.Layouts
|
|||||||
import QtQuick.Window
|
import QtQuick.Window
|
||||||
import QtQuick.Controls
|
import QtQuick.Controls
|
||||||
import FluentUI
|
import FluentUI
|
||||||
|
import "./component"
|
||||||
|
|
||||||
FluScrollablePage{
|
FluScrollablePage{
|
||||||
|
|
||||||
@ -10,9 +11,10 @@ FluScrollablePage{
|
|||||||
leftPadding:10
|
leftPadding:10
|
||||||
rightPadding:10
|
rightPadding:10
|
||||||
bottomPadding:20
|
bottomPadding:20
|
||||||
|
spacing: 0
|
||||||
|
|
||||||
FluArea{
|
FluArea{
|
||||||
width: parent.width
|
Layout.fillWidth: true
|
||||||
height: 370
|
height: 370
|
||||||
paddings: 10
|
paddings: 10
|
||||||
Layout.topMargin: 20
|
Layout.topMargin: 20
|
||||||
@ -35,4 +37,14 @@ FluScrollablePage{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
CodeExpander{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
code:'FluCarousel{
|
||||||
|
width: 400
|
||||||
|
height: 300
|
||||||
|
Component.onCompleted: {
|
||||||
|
setData([{url:"qrc:/res/image/banner_1.jpg"},{url:"qrc:/res/image/banner_2.jpg"},{url:"qrc:/res/image/banner_3.jpg"}])
|
||||||
|
}
|
||||||
|
}'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -3,6 +3,7 @@ import QtQuick.Layouts
|
|||||||
import QtQuick.Window
|
import QtQuick.Window
|
||||||
import QtQuick.Controls
|
import QtQuick.Controls
|
||||||
import FluentUI
|
import FluentUI
|
||||||
|
import "./component"
|
||||||
|
|
||||||
FluScrollablePage{
|
FluScrollablePage{
|
||||||
|
|
||||||
@ -10,14 +11,28 @@ FluScrollablePage{
|
|||||||
leftPadding:10
|
leftPadding:10
|
||||||
rightPadding:10
|
rightPadding:10
|
||||||
bottomPadding:20
|
bottomPadding:20
|
||||||
|
spacing: 0
|
||||||
|
|
||||||
FluCheckBox{
|
FluArea{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
height: 68
|
||||||
|
paddings: 10
|
||||||
Layout.topMargin: 20
|
Layout.topMargin: 20
|
||||||
|
Row{
|
||||||
|
spacing: 30
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
FluCheckBox{
|
||||||
}
|
}
|
||||||
|
|
||||||
FluCheckBox{
|
FluCheckBox{
|
||||||
Layout.topMargin: 20
|
|
||||||
text:"Text"
|
text:"Text"
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
CodeExpander{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
code:'FluCheckBox{
|
||||||
|
text:"Text"
|
||||||
|
}'
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -3,6 +3,7 @@ import QtQuick.Controls
|
|||||||
import QtQuick.Layouts
|
import QtQuick.Layouts
|
||||||
import QtQuick.Window
|
import QtQuick.Window
|
||||||
import FluentUI
|
import FluentUI
|
||||||
|
import "./component"
|
||||||
|
|
||||||
FluScrollablePage{
|
FluScrollablePage{
|
||||||
|
|
||||||
@ -10,9 +11,10 @@ FluScrollablePage{
|
|||||||
leftPadding:10
|
leftPadding:10
|
||||||
rightPadding:10
|
rightPadding:10
|
||||||
bottomPadding:20
|
bottomPadding:20
|
||||||
|
spacing: 0
|
||||||
|
|
||||||
FluArea{
|
FluArea{
|
||||||
width: parent.width
|
Layout.fillWidth: true
|
||||||
height: 280
|
height: 280
|
||||||
Layout.topMargin: 20
|
Layout.topMargin: 20
|
||||||
paddings: 10
|
paddings: 10
|
||||||
@ -37,9 +39,15 @@ FluScrollablePage{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
CodeExpander{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
code:'FluColorView{
|
||||||
|
|
||||||
|
}'
|
||||||
|
}
|
||||||
|
|
||||||
FluArea{
|
FluArea{
|
||||||
width: parent.width
|
Layout.fillWidth: true
|
||||||
Layout.topMargin: 20
|
Layout.topMargin: 20
|
||||||
height: 60
|
height: 60
|
||||||
paddings: 10
|
paddings: 10
|
||||||
@ -54,6 +62,12 @@ FluScrollablePage{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
CodeExpander{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
code:'FluColorPicker{
|
||||||
|
|
||||||
|
}'
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -3,6 +3,7 @@ import QtQuick.Controls
|
|||||||
import QtQuick.Layouts
|
import QtQuick.Layouts
|
||||||
import QtQuick.Window
|
import QtQuick.Window
|
||||||
import FluentUI
|
import FluentUI
|
||||||
|
import "./component"
|
||||||
|
|
||||||
FluScrollablePage{
|
FluScrollablePage{
|
||||||
|
|
||||||
@ -10,44 +11,42 @@ FluScrollablePage{
|
|||||||
leftPadding:10
|
leftPadding:10
|
||||||
rightPadding:10
|
rightPadding:10
|
||||||
bottomPadding:20
|
bottomPadding:20
|
||||||
|
spacing: 0
|
||||||
|
|
||||||
FluArea{
|
FluArea{
|
||||||
width: parent.width
|
Layout.fillWidth: true
|
||||||
Layout.topMargin: 20
|
Layout.topMargin: 20
|
||||||
height: 80
|
height: 80
|
||||||
paddings: 10
|
paddings: 10
|
||||||
|
|
||||||
ColumnLayout{
|
ColumnLayout{
|
||||||
|
|
||||||
anchors{
|
anchors{
|
||||||
verticalCenter: parent.verticalCenter
|
verticalCenter: parent.verticalCenter
|
||||||
left: parent.left
|
left: parent.left
|
||||||
}
|
}
|
||||||
|
|
||||||
FluText{
|
FluText{
|
||||||
text:"showYear=true"
|
text:"showYear=true"
|
||||||
}
|
}
|
||||||
|
|
||||||
FluDatePicker{
|
FluDatePicker{
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
CodeExpander{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
code:'FluDatePicker{
|
||||||
|
|
||||||
|
}'
|
||||||
|
}
|
||||||
|
|
||||||
FluArea{
|
FluArea{
|
||||||
width: parent.width
|
Layout.fillWidth: true
|
||||||
Layout.topMargin: 20
|
Layout.topMargin: 20
|
||||||
height: 80
|
height: 80
|
||||||
paddings: 10
|
paddings: 10
|
||||||
|
|
||||||
ColumnLayout{
|
ColumnLayout{
|
||||||
|
|
||||||
anchors{
|
anchors{
|
||||||
verticalCenter: parent.verticalCenter
|
verticalCenter: parent.verticalCenter
|
||||||
left: parent.left
|
left: parent.left
|
||||||
}
|
}
|
||||||
|
|
||||||
FluText{
|
FluText{
|
||||||
text:"showYear=false"
|
text:"showYear=false"
|
||||||
}
|
}
|
||||||
@ -56,8 +55,13 @@ FluScrollablePage{
|
|||||||
showYear:false
|
showYear:false
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
CodeExpander{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
code:'FluDatePicker{
|
||||||
|
showYear:false
|
||||||
|
}'
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -3,6 +3,7 @@ import QtQuick.Layouts
|
|||||||
import QtQuick.Window
|
import QtQuick.Window
|
||||||
import QtQuick.Controls
|
import QtQuick.Controls
|
||||||
import FluentUI
|
import FluentUI
|
||||||
|
import "./component"
|
||||||
|
|
||||||
FluScrollablePage{
|
FluScrollablePage{
|
||||||
|
|
||||||
@ -10,6 +11,40 @@ FluScrollablePage{
|
|||||||
leftPadding:10
|
leftPadding:10
|
||||||
rightPadding:10
|
rightPadding:10
|
||||||
bottomPadding:20
|
bottomPadding:20
|
||||||
|
spacing: 0
|
||||||
|
|
||||||
|
FluArea{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
height: 68
|
||||||
|
paddings: 10
|
||||||
|
Layout.topMargin: 20
|
||||||
|
FluButton{
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
Layout.topMargin: 20
|
||||||
|
text:"Show Dialog"
|
||||||
|
onClicked: {
|
||||||
|
dialog.open()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
CodeExpander{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
code:'FluContentDialog{
|
||||||
|
id:dialog
|
||||||
|
title:"友情提示"
|
||||||
|
message:"确定要退出程序么?"
|
||||||
|
negativeText:"取消"
|
||||||
|
onNegativeClicked:{
|
||||||
|
showSuccess("点击取消按钮")
|
||||||
|
}
|
||||||
|
positiveText:"确定"
|
||||||
|
onPositiveClicked:{
|
||||||
|
showSuccess("点击确定按钮")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
dialog.open()
|
||||||
|
'
|
||||||
|
}
|
||||||
|
|
||||||
FluContentDialog{
|
FluContentDialog{
|
||||||
id:dialog
|
id:dialog
|
||||||
@ -25,11 +60,5 @@ FluScrollablePage{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
FluButton{
|
|
||||||
Layout.topMargin: 20
|
|
||||||
text:"Show Dialog"
|
|
||||||
onClicked: {
|
|
||||||
dialog.open()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
@ -3,6 +3,7 @@ import QtQuick.Controls
|
|||||||
import QtQuick.Layouts
|
import QtQuick.Layouts
|
||||||
import QtQuick.Window
|
import QtQuick.Window
|
||||||
import FluentUI
|
import FluentUI
|
||||||
|
import "./component"
|
||||||
|
|
||||||
FluScrollablePage{
|
FluScrollablePage{
|
||||||
|
|
||||||
@ -10,6 +11,20 @@ FluScrollablePage{
|
|||||||
leftPadding:10
|
leftPadding:10
|
||||||
rightPadding:10
|
rightPadding:10
|
||||||
bottomPadding:20
|
bottomPadding:20
|
||||||
|
spacing: 0
|
||||||
|
|
||||||
|
FluArea{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
height: layout_column.height+40
|
||||||
|
paddings: 10
|
||||||
|
Layout.topMargin: 20
|
||||||
|
Column{
|
||||||
|
id:layout_column
|
||||||
|
spacing: 15
|
||||||
|
anchors{
|
||||||
|
verticalCenter: parent.verticalCenter
|
||||||
|
left:parent.left
|
||||||
|
}
|
||||||
|
|
||||||
FluExpander{
|
FluExpander{
|
||||||
headerText:"打开一个单选框"
|
headerText:"打开一个单选框"
|
||||||
@ -62,4 +77,33 @@ FluScrollablePage{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
CodeExpander{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
code:'FluExpander{
|
||||||
|
headerText:"打开一个单选框"
|
||||||
|
Item{
|
||||||
|
anchors.fill: parent
|
||||||
|
Flickable{
|
||||||
|
width: parent.width
|
||||||
|
height: parent.height
|
||||||
|
contentWidth: width
|
||||||
|
contentHeight: text_info.height
|
||||||
|
ScrollBar.vertical: FluScrollBar {}
|
||||||
|
FluText{
|
||||||
|
id:text_info
|
||||||
|
width: scrollview.width
|
||||||
|
wrapMode: Text.WrapAnywhere
|
||||||
|
padding: 14
|
||||||
|
text:"先帝创业未半而中道崩殂,今天下三分......""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}'
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
120
example/T_FlipView.qml
Normal file
120
example/T_FlipView.qml
Normal file
@ -0,0 +1,120 @@
|
|||||||
|
import QtQuick
|
||||||
|
import QtQuick.Controls
|
||||||
|
import QtQuick.Layouts
|
||||||
|
import QtQuick.Window
|
||||||
|
import FluentUI
|
||||||
|
import "./component"
|
||||||
|
|
||||||
|
FluScrollablePage{
|
||||||
|
|
||||||
|
title:"FlipView"
|
||||||
|
leftPadding:10
|
||||||
|
rightPadding:10
|
||||||
|
bottomPadding:20
|
||||||
|
spacing: 0
|
||||||
|
|
||||||
|
FluArea{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
height: 340
|
||||||
|
paddings: 10
|
||||||
|
Layout.topMargin: 20
|
||||||
|
ColumnLayout{
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
FluText{
|
||||||
|
text:"水平方向的FlipView"
|
||||||
|
}
|
||||||
|
FluFlipView{
|
||||||
|
Image{
|
||||||
|
source: "qrc:/res/image/banner_1.jpg"
|
||||||
|
asynchronous: true
|
||||||
|
fillMode:Image.PreserveAspectCrop
|
||||||
|
}
|
||||||
|
Image{
|
||||||
|
source: "qrc:/res/image/banner_2.jpg"
|
||||||
|
asynchronous: true
|
||||||
|
fillMode:Image.PreserveAspectCrop
|
||||||
|
}
|
||||||
|
Image{
|
||||||
|
source: "qrc:/res/image/banner_3.jpg"
|
||||||
|
asynchronous: true
|
||||||
|
fillMode:Image.PreserveAspectCrop
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
CodeExpander{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
code:'FluFlipView{
|
||||||
|
Image{
|
||||||
|
source: "qrc:/res/image/banner_1.jpg"
|
||||||
|
asynchronous: true
|
||||||
|
fillMode:Image.PreserveAspectCrop
|
||||||
|
}
|
||||||
|
Image{
|
||||||
|
source: "qrc:/res/image/banner_1.jpg"
|
||||||
|
asynchronous: true
|
||||||
|
fillMode:Image.PreserveAspectCrop
|
||||||
|
}
|
||||||
|
Image{
|
||||||
|
source: "qrc:/res/image/banner_1.jpg"
|
||||||
|
asynchronous: true
|
||||||
|
fillMode:Image.PreserveAspectCrop
|
||||||
|
}
|
||||||
|
}
|
||||||
|
'
|
||||||
|
}
|
||||||
|
|
||||||
|
FluArea{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
height: 340
|
||||||
|
paddings: 10
|
||||||
|
Layout.topMargin: 20
|
||||||
|
ColumnLayout{
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
FluText{
|
||||||
|
text:"垂直方向的FlipView"
|
||||||
|
}
|
||||||
|
FluFlipView{
|
||||||
|
vertical:true
|
||||||
|
Image{
|
||||||
|
source: "qrc:/res/image/banner_1.jpg"
|
||||||
|
asynchronous: true
|
||||||
|
sourceSize: Qt.size(400,300)
|
||||||
|
fillMode:Image.PreserveAspectCrop
|
||||||
|
}
|
||||||
|
Image{
|
||||||
|
source: "qrc:/res/image/banner_2.jpg"
|
||||||
|
asynchronous: true
|
||||||
|
fillMode:Image.PreserveAspectCrop
|
||||||
|
}
|
||||||
|
Image{
|
||||||
|
source: "qrc:/res/image/banner_3.jpg"
|
||||||
|
asynchronous: true
|
||||||
|
fillMode:Image.PreserveAspectCrop
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
CodeExpander{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
code:'FluFlipView{
|
||||||
|
vertical:true
|
||||||
|
Image{
|
||||||
|
source: "qrc:/res/image/banner_1.jpg"
|
||||||
|
asynchronous: true
|
||||||
|
fillMode:Image.PreserveAspectCrop
|
||||||
|
}
|
||||||
|
Image{
|
||||||
|
source: "qrc:/res/image/banner_1.jpg"
|
||||||
|
asynchronous: true
|
||||||
|
fillMode:Image.PreserveAspectCrop
|
||||||
|
}
|
||||||
|
Image{
|
||||||
|
source: "qrc:/res/image/banner_1.jpg"
|
||||||
|
asynchronous: true
|
||||||
|
fillMode:Image.PreserveAspectCrop
|
||||||
|
}
|
||||||
|
}
|
||||||
|
'
|
||||||
|
}
|
||||||
|
}
|
@ -3,6 +3,7 @@ import QtQuick.Layouts
|
|||||||
import QtQuick.Window
|
import QtQuick.Window
|
||||||
import QtQuick.Controls
|
import QtQuick.Controls
|
||||||
import FluentUI
|
import FluentUI
|
||||||
|
import "./component"
|
||||||
|
|
||||||
FluScrollablePage{
|
FluScrollablePage{
|
||||||
|
|
||||||
@ -10,33 +11,53 @@ FluScrollablePage{
|
|||||||
leftPadding:10
|
leftPadding:10
|
||||||
rightPadding:10
|
rightPadding:10
|
||||||
bottomPadding:20
|
bottomPadding:20
|
||||||
|
spacing: 0
|
||||||
|
|
||||||
|
FluArea{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
Layout.topMargin: 20
|
||||||
|
height: 200
|
||||||
|
paddings: 10
|
||||||
|
ColumnLayout{
|
||||||
|
spacing: 14
|
||||||
|
anchors{
|
||||||
|
verticalCenter: parent.verticalCenter
|
||||||
|
left: parent.left
|
||||||
|
}
|
||||||
FluButton{
|
FluButton{
|
||||||
text:"Info"
|
text:"Info"
|
||||||
Layout.topMargin: 20
|
|
||||||
onClicked: {
|
onClicked: {
|
||||||
showInfo("这是一个Info样式的InfoBar")
|
showInfo("这是一个Info样式的InfoBar")
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
FluButton{
|
FluButton{
|
||||||
text:"Warning"
|
text:"Warning"
|
||||||
Layout.topMargin: 20
|
|
||||||
onClicked: {
|
onClicked: {
|
||||||
showWarning("这是一个Warning样式的InfoBar")
|
showWarning("这是一个Warning样式的InfoBar")
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
FluButton{
|
FluButton{
|
||||||
text:"Error"
|
text:"Error"
|
||||||
Layout.topMargin: 20
|
|
||||||
onClicked: {
|
onClicked: {
|
||||||
showError("这是一个Error样式的InfoBar")
|
showError("这是一个Error样式的InfoBar")
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
FluButton{
|
FluButton{
|
||||||
text:"Success"
|
text:"Success"
|
||||||
Layout.topMargin: 20
|
|
||||||
onClicked: {
|
onClicked: {
|
||||||
showSuccess("这是一个Success样式的InfoBar这是一个Success样式的InfoBar")
|
showSuccess("这是一个Success样式的InfoBar这是一个Success样式的InfoBar")
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
CodeExpander{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
code:' showInfo("这是一个Info样式的InfoBar")
|
||||||
|
|
||||||
|
showWarning("这是一个Warning样式的InfoBar")
|
||||||
|
|
||||||
|
showError("这是一个Error样式的InfoBar")
|
||||||
|
|
||||||
|
showSuccess("这是一个Success样式的InfoBar这是一个Success样式的InfoBar")'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -3,6 +3,7 @@ import QtQuick.Controls
|
|||||||
import QtQuick.Layouts
|
import QtQuick.Layouts
|
||||||
import QtQuick.Window
|
import QtQuick.Window
|
||||||
import FluentUI
|
import FluentUI
|
||||||
|
import "./component"
|
||||||
|
|
||||||
FluScrollablePage{
|
FluScrollablePage{
|
||||||
|
|
||||||
@ -10,6 +11,7 @@ FluScrollablePage{
|
|||||||
leftPadding:10
|
leftPadding:10
|
||||||
rightPadding:10
|
rightPadding:10
|
||||||
bottomPadding:20
|
bottomPadding:20
|
||||||
|
spacing: 0
|
||||||
|
|
||||||
onVisibleChanged: {
|
onVisibleChanged: {
|
||||||
if(visible){
|
if(visible){
|
||||||
@ -18,9 +20,8 @@ FluScrollablePage{
|
|||||||
player.pause()
|
player.pause()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
FluArea{
|
FluArea{
|
||||||
width: parent.width
|
Layout.fillWidth: true
|
||||||
height: 320
|
height: 320
|
||||||
Layout.topMargin: 20
|
Layout.topMargin: 20
|
||||||
paddings: 10
|
paddings: 10
|
||||||
@ -35,13 +36,19 @@ FluScrollablePage{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
CodeExpander{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
code:'FluMediaPlayer{
|
||||||
|
id:player
|
||||||
|
source:"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
|
||||||
|
}
|
||||||
|
'
|
||||||
|
}
|
||||||
FluArea{
|
FluArea{
|
||||||
width: parent.width
|
Layout.fillWidth: true
|
||||||
height: 68
|
height: 68
|
||||||
Layout.topMargin: 20
|
Layout.topMargin: 20
|
||||||
paddings: 10
|
paddings: 10
|
||||||
|
|
||||||
FluButton{
|
FluButton{
|
||||||
text:"跳转到视频播放器窗口"
|
text:"跳转到视频播放器窗口"
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
@ -49,8 +56,10 @@ FluScrollablePage{
|
|||||||
FluApp.navigate("/media",{source:"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"})
|
FluApp.navigate("/media",{source:"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -3,6 +3,7 @@ import QtQuick.Layouts
|
|||||||
import QtQuick.Window
|
import QtQuick.Window
|
||||||
import QtQuick.Controls
|
import QtQuick.Controls
|
||||||
import FluentUI
|
import FluentUI
|
||||||
|
import "./component"
|
||||||
|
|
||||||
FluScrollablePage{
|
FluScrollablePage{
|
||||||
|
|
||||||
@ -10,6 +11,20 @@ FluScrollablePage{
|
|||||||
leftPadding:10
|
leftPadding:10
|
||||||
rightPadding:10
|
rightPadding:10
|
||||||
bottomPadding:20
|
bottomPadding:20
|
||||||
|
spacing: 0
|
||||||
|
|
||||||
|
FluArea{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
height: 100
|
||||||
|
paddings: 10
|
||||||
|
Layout.topMargin: 20
|
||||||
|
Column{
|
||||||
|
id:layout_column
|
||||||
|
spacing: 15
|
||||||
|
anchors{
|
||||||
|
verticalCenter: parent.verticalCenter
|
||||||
|
left:parent.left
|
||||||
|
}
|
||||||
|
|
||||||
FluButton{
|
FluButton{
|
||||||
text:"左击菜单"
|
text:"左击菜单"
|
||||||
@ -19,7 +34,6 @@ FluScrollablePage{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
FluButton{
|
FluButton{
|
||||||
text:"右击菜单"
|
text:"右击菜单"
|
||||||
Layout.topMargin: 20
|
Layout.topMargin: 20
|
||||||
@ -34,6 +48,29 @@ FluScrollablePage{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
CodeExpander{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
code:'FluMenu{
|
||||||
|
id:menu
|
||||||
|
FluMenuItem:{
|
||||||
|
text:"删除"
|
||||||
|
onClicked: {
|
||||||
|
showError("删除")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
FluMenuItem:{
|
||||||
|
text:"修改"
|
||||||
|
onClicked: {
|
||||||
|
showInfo"修改")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
menu.popup()
|
||||||
|
'
|
||||||
|
}
|
||||||
|
|
||||||
FluMenu{
|
FluMenu{
|
||||||
id:menu
|
id:menu
|
||||||
@ -46,7 +83,7 @@ FluScrollablePage{
|
|||||||
FluMenuItem{
|
FluMenuItem{
|
||||||
text:"修改"
|
text:"修改"
|
||||||
onClicked: {
|
onClicked: {
|
||||||
showError("修改")
|
showInfo("修改")
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -3,17 +3,18 @@ import QtQuick.Layouts
|
|||||||
import QtQuick.Window
|
import QtQuick.Window
|
||||||
import QtQuick.Controls
|
import QtQuick.Controls
|
||||||
import FluentUI
|
import FluentUI
|
||||||
|
import "./component"
|
||||||
|
|
||||||
FluScrollablePage{
|
FluScrollablePage{
|
||||||
|
|
||||||
|
property string password: ""
|
||||||
|
property var loginPageRegister: registerForPageResult("/login")
|
||||||
|
|
||||||
title:"MultiWindow"
|
title:"MultiWindow"
|
||||||
leftPadding:10
|
leftPadding:10
|
||||||
rightPadding:10
|
rightPadding:10
|
||||||
bottomPadding:20
|
bottomPadding:20
|
||||||
|
spacing: 0
|
||||||
property string password: ""
|
|
||||||
|
|
||||||
property var loginPageRegister: registerForPageResult("/login")
|
|
||||||
|
|
||||||
Connections{
|
Connections{
|
||||||
target: loginPageRegister
|
target: loginPageRegister
|
||||||
@ -24,11 +25,10 @@ FluScrollablePage{
|
|||||||
}
|
}
|
||||||
|
|
||||||
FluArea{
|
FluArea{
|
||||||
width: parent.width
|
Layout.fillWidth: true
|
||||||
height: 100
|
height: 100
|
||||||
paddings: 10
|
paddings: 10
|
||||||
Layout.topMargin: 20
|
Layout.topMargin: 20
|
||||||
|
|
||||||
Column{
|
Column{
|
||||||
spacing: 15
|
spacing: 15
|
||||||
anchors{
|
anchors{
|
||||||
@ -46,9 +46,19 @@ FluScrollablePage{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
CodeExpander{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
code:'FluButton{
|
||||||
|
text:"点击跳转"
|
||||||
|
onClicked: {
|
||||||
|
FluApp.navigate("/about")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
'
|
||||||
|
}
|
||||||
|
|
||||||
FluArea{
|
FluArea{
|
||||||
width: parent.width
|
Layout.fillWidth: true
|
||||||
height: 130
|
height: 130
|
||||||
paddings: 10
|
paddings: 10
|
||||||
Layout.topMargin: 20
|
Layout.topMargin: 20
|
||||||
@ -68,13 +78,30 @@ FluScrollablePage{
|
|||||||
loginPageRegister.launch({username:"zhuzichu"})
|
loginPageRegister.launch({username:"zhuzichu"})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
FluText{
|
FluText{
|
||||||
text:"登录窗口返回过来的密码->"+password
|
text:"登录窗口返回过来的密码->"+password
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
CodeExpander{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
code:'property var loginPageRegister: registerForPageResult("/login")
|
||||||
|
|
||||||
|
Connections{
|
||||||
|
target: loginPageRegister
|
||||||
|
function onResult(data)
|
||||||
|
{
|
||||||
|
password = data.password
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
FluButton{
|
||||||
|
text:"点击跳转"
|
||||||
|
onClicked: {
|
||||||
|
loginPageRegister.launch({username:"zhuzichu"})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
'
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
82
example/T_Pivot.qml
Normal file
82
example/T_Pivot.qml
Normal file
@ -0,0 +1,82 @@
|
|||||||
|
import QtQuick
|
||||||
|
import QtQuick.Controls
|
||||||
|
import QtQuick.Layouts
|
||||||
|
import QtQuick.Window
|
||||||
|
import FluentUI
|
||||||
|
import "./component"
|
||||||
|
|
||||||
|
FluScrollablePage{
|
||||||
|
|
||||||
|
title:"Pivot"
|
||||||
|
leftPadding:10
|
||||||
|
rightPadding:10
|
||||||
|
bottomPadding:20
|
||||||
|
spacing: 0
|
||||||
|
|
||||||
|
FluArea{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
Layout.topMargin: 20
|
||||||
|
height: 400
|
||||||
|
paddings: 10
|
||||||
|
|
||||||
|
FluPivot{
|
||||||
|
anchors.fill: parent
|
||||||
|
FluPivotItem{
|
||||||
|
title:"All"
|
||||||
|
contentItem:FluText{
|
||||||
|
text:"All emails go here."
|
||||||
|
}
|
||||||
|
}
|
||||||
|
FluPivotItem{
|
||||||
|
title:"Unread"
|
||||||
|
contentItem:FluText{
|
||||||
|
text:"Unread emails go here."
|
||||||
|
}
|
||||||
|
}
|
||||||
|
FluPivotItem{
|
||||||
|
title:"Flagged"
|
||||||
|
contentItem:FluText{
|
||||||
|
text:"Flagged emails go here."
|
||||||
|
}
|
||||||
|
}
|
||||||
|
FluPivotItem{
|
||||||
|
title:"Urgent"
|
||||||
|
contentItem:FluText{
|
||||||
|
text:"Urgent emails go here."
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
CodeExpander{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
code:'FluPivot{
|
||||||
|
anchors.fill: parent
|
||||||
|
FluPivotItem:{
|
||||||
|
text:"All"
|
||||||
|
contentItem: FluText{
|
||||||
|
text:"All emails go here."
|
||||||
|
}
|
||||||
|
}
|
||||||
|
FluPivotItem:{
|
||||||
|
text:"Unread"
|
||||||
|
contentItem: FluText{
|
||||||
|
text:"Unread emails go here."
|
||||||
|
}
|
||||||
|
}
|
||||||
|
FluPivotItem:{
|
||||||
|
text:"Flagged"
|
||||||
|
contentItem: FluText{
|
||||||
|
text:"Flagged emails go here."
|
||||||
|
}
|
||||||
|
}
|
||||||
|
FluPivotItem:{
|
||||||
|
text:"Urgent"
|
||||||
|
contentItem: FluText{
|
||||||
|
text:"Urgent emails go here."
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
'
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
@ -3,6 +3,7 @@ import QtQuick.Layouts
|
|||||||
import QtQuick.Window
|
import QtQuick.Window
|
||||||
import QtQuick.Controls
|
import QtQuick.Controls
|
||||||
import FluentUI
|
import FluentUI
|
||||||
|
import "./component"
|
||||||
|
|
||||||
FluScrollablePage{
|
FluScrollablePage{
|
||||||
|
|
||||||
@ -10,30 +11,59 @@ FluScrollablePage{
|
|||||||
leftPadding:10
|
leftPadding:10
|
||||||
rightPadding:10
|
rightPadding:10
|
||||||
bottomPadding:20
|
bottomPadding:20
|
||||||
|
spacing: 0
|
||||||
|
|
||||||
FluProgressBar{
|
FluArea{
|
||||||
|
Layout.fillWidth: true
|
||||||
Layout.topMargin: 20
|
Layout.topMargin: 20
|
||||||
|
height: 260
|
||||||
|
paddings: 10
|
||||||
|
ColumnLayout{
|
||||||
|
spacing: 20
|
||||||
|
anchors{
|
||||||
|
verticalCenter: parent.verticalCenter
|
||||||
|
left: parent.left
|
||||||
|
}
|
||||||
|
FluProgressBar{
|
||||||
}
|
}
|
||||||
FluProgressRing{
|
FluProgressRing{
|
||||||
Layout.topMargin: 10
|
|
||||||
}
|
}
|
||||||
FluProgressBar{
|
FluProgressBar{
|
||||||
id:progress_bar
|
id:progress_bar
|
||||||
Layout.topMargin: 20
|
|
||||||
indeterminate: false
|
indeterminate: false
|
||||||
}
|
}
|
||||||
FluProgressRing{
|
FluProgressRing{
|
||||||
id:progress_ring
|
id:progress_ring
|
||||||
Layout.topMargin: 10
|
|
||||||
indeterminate: false
|
indeterminate: false
|
||||||
}
|
}
|
||||||
FluSlider{
|
FluSlider{
|
||||||
Layout.topMargin: 30
|
|
||||||
value:50
|
value:50
|
||||||
onValueChanged:{
|
onValueChanged:{
|
||||||
progress_bar.progress = value/100
|
progress_bar.progress = value/100
|
||||||
progress_ring.progress = value/100
|
progress_ring.progress = value/100
|
||||||
}
|
}
|
||||||
Layout.bottomMargin: 30
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
CodeExpander{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
code:'FluProgressBar{
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
FluProgressRing{
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
FluProgressBar{
|
||||||
|
indeterminate: false
|
||||||
|
}
|
||||||
|
|
||||||
|
FluProgressRing{
|
||||||
|
indeterminate: false
|
||||||
|
}'
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -3,6 +3,7 @@ import QtQuick.Layouts
|
|||||||
import QtQuick.Controls
|
import QtQuick.Controls
|
||||||
import QtQuick.Window
|
import QtQuick.Window
|
||||||
import FluentUI
|
import FluentUI
|
||||||
|
import "./component"
|
||||||
|
|
||||||
FluScrollablePage{
|
FluScrollablePage{
|
||||||
|
|
||||||
@ -10,6 +11,20 @@ FluScrollablePage{
|
|||||||
leftPadding:10
|
leftPadding:10
|
||||||
rightPadding:10
|
rightPadding:10
|
||||||
bottomPadding:20
|
bottomPadding:20
|
||||||
|
spacing: 0
|
||||||
|
|
||||||
|
FluArea{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
Layout.topMargin: 20
|
||||||
|
height: 480
|
||||||
|
paddings: 10
|
||||||
|
|
||||||
|
Column{
|
||||||
|
spacing: 15
|
||||||
|
anchors{
|
||||||
|
verticalCenter: parent.verticalCenter
|
||||||
|
left: parent.left
|
||||||
|
}
|
||||||
|
|
||||||
RowLayout{
|
RowLayout{
|
||||||
Layout.topMargin: 20
|
Layout.topMargin: 20
|
||||||
@ -114,4 +129,23 @@ FluScrollablePage{
|
|||||||
}
|
}
|
||||||
Layout.topMargin: 10
|
Layout.topMargin: 10
|
||||||
}
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
CodeExpander{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
code:'FluRectangle{
|
||||||
|
radius: [25,25,25,25]
|
||||||
|
width: 50
|
||||||
|
height: 50
|
||||||
|
Image{
|
||||||
|
asynchronous: true
|
||||||
|
anchors.fill: parent
|
||||||
|
source: "qrc:/res/svg/avatar_4.svg"
|
||||||
|
sourceSize: Qt.size(width,height)
|
||||||
|
}
|
||||||
|
}'
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -2,6 +2,7 @@
|
|||||||
import QtQuick.Layouts
|
import QtQuick.Layouts
|
||||||
import QtQuick.Window
|
import QtQuick.Window
|
||||||
import QtQuick.Controls
|
import QtQuick.Controls
|
||||||
|
import "./component"
|
||||||
import FluentUI
|
import FluentUI
|
||||||
|
|
||||||
FluScrollablePage{
|
FluScrollablePage{
|
||||||
@ -10,17 +11,46 @@ FluScrollablePage{
|
|||||||
leftPadding:10
|
leftPadding:10
|
||||||
rightPadding:10
|
rightPadding:10
|
||||||
bottomPadding:20
|
bottomPadding:20
|
||||||
|
spacing: 0
|
||||||
|
|
||||||
FluSlider{
|
FluArea{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
height: 100
|
||||||
|
paddings: 10
|
||||||
Layout.topMargin: 20
|
Layout.topMargin: 20
|
||||||
value: 50
|
|
||||||
Layout.leftMargin: 10
|
|
||||||
}
|
|
||||||
FluSlider{
|
FluSlider{
|
||||||
|
value: 50
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
}
|
||||||
|
}
|
||||||
|
CodeExpander{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
code:'FluSlider{
|
||||||
|
value:50
|
||||||
|
}'
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
FluArea{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
height: 200
|
||||||
|
paddings: 10
|
||||||
|
Layout.topMargin: 20
|
||||||
|
FluSlider{
|
||||||
|
value: 50
|
||||||
vertical:true
|
vertical:true
|
||||||
Layout.topMargin: 20
|
anchors.left: parent.left
|
||||||
Layout.leftMargin: 10
|
anchors.leftMargin: 20
|
||||||
Layout.bottomMargin: 20
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
value: 50
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
CodeExpander{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
code:'FluSlider{
|
||||||
|
vertical:true
|
||||||
|
value:50
|
||||||
|
}'
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -3,6 +3,7 @@ import QtQuick.Controls
|
|||||||
import QtQuick.Layouts
|
import QtQuick.Layouts
|
||||||
import QtQuick.Window
|
import QtQuick.Window
|
||||||
import FluentUI
|
import FluentUI
|
||||||
|
import "./component"
|
||||||
|
|
||||||
FluScrollablePage{
|
FluScrollablePage{
|
||||||
|
|
||||||
@ -10,6 +11,7 @@ FluScrollablePage{
|
|||||||
leftPadding:10
|
leftPadding:10
|
||||||
rightPadding:10
|
rightPadding:10
|
||||||
bottomPadding:20
|
bottomPadding:20
|
||||||
|
spacing: 0
|
||||||
|
|
||||||
property var colors : [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
|
property var colors : [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
|
||||||
|
|
||||||
@ -32,7 +34,7 @@ FluScrollablePage{
|
|||||||
}
|
}
|
||||||
|
|
||||||
FluArea{
|
FluArea{
|
||||||
width: parent.width
|
Layout.fillWidth: true
|
||||||
Layout.topMargin: 20
|
Layout.topMargin: 20
|
||||||
height: 50
|
height: 50
|
||||||
paddings: 10
|
paddings: 10
|
||||||
@ -98,8 +100,8 @@ FluScrollablePage{
|
|||||||
}
|
}
|
||||||
|
|
||||||
FluArea{
|
FluArea{
|
||||||
width: parent.width
|
Layout.fillWidth: true
|
||||||
Layout.topMargin: 5
|
Layout.topMargin: 15
|
||||||
height: 400
|
height: 400
|
||||||
paddings: 10
|
paddings: 10
|
||||||
FluTabView{
|
FluTabView{
|
||||||
@ -109,5 +111,27 @@ FluScrollablePage{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
CodeExpander{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
code:'FluTabView{
|
||||||
|
anchors.fill: parent
|
||||||
|
Component.onCompleted: {
|
||||||
|
newTab()
|
||||||
|
newTab()
|
||||||
|
newTab()
|
||||||
|
}
|
||||||
|
Component{
|
||||||
|
id:com_page
|
||||||
|
Rectangle{
|
||||||
|
anchors.fill: parent
|
||||||
|
color: argument
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function newTab(){
|
||||||
|
tab_view.appendTab("qrc:/res/image/favicon.ico","Document 1",com_page,argument)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
'
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
110
example/T_TableView.qml
Normal file
110
example/T_TableView.qml
Normal file
@ -0,0 +1,110 @@
|
|||||||
|
import QtQuick
|
||||||
|
import QtQuick.Controls
|
||||||
|
import QtQuick.Layouts
|
||||||
|
import QtQuick.Window
|
||||||
|
import FluentUI
|
||||||
|
import "./component"
|
||||||
|
|
||||||
|
FluScrollablePage{
|
||||||
|
|
||||||
|
title:"TableView"
|
||||||
|
leftPadding:10
|
||||||
|
rightPadding:10
|
||||||
|
bottomPadding:20
|
||||||
|
spacing: 0
|
||||||
|
|
||||||
|
Component.onCompleted: {
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
title: '姓名',
|
||||||
|
dataIndex: 'name',
|
||||||
|
width:100
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '年龄',
|
||||||
|
dataIndex: 'age',
|
||||||
|
width:100
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '住址',
|
||||||
|
dataIndex: 'address',
|
||||||
|
width:200
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '别名',
|
||||||
|
dataIndex: 'nickname',
|
||||||
|
width:100
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
dataIndex: 'action',
|
||||||
|
width:100
|
||||||
|
},
|
||||||
|
];
|
||||||
|
table_view.columns = columns
|
||||||
|
loadData(1,10)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
FluTableView{
|
||||||
|
id:table_view
|
||||||
|
Layout.fillWidth: true
|
||||||
|
Layout.topMargin: 20
|
||||||
|
width:parent.width
|
||||||
|
pageCurrent:1
|
||||||
|
pageCount:10
|
||||||
|
itemCount: 1000
|
||||||
|
onRequestPage:
|
||||||
|
(page,count)=> {
|
||||||
|
loadData(page,count)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Component{
|
||||||
|
id:com_action
|
||||||
|
Item{
|
||||||
|
Row{
|
||||||
|
anchors.centerIn: parent
|
||||||
|
spacing: 10
|
||||||
|
FluFilledButton{
|
||||||
|
text:"编辑"
|
||||||
|
topPadding:3
|
||||||
|
bottomPadding:3
|
||||||
|
leftPadding:3
|
||||||
|
rightPadding:3
|
||||||
|
onClicked:{
|
||||||
|
console.debug(dataModel.index)
|
||||||
|
showSuccess(JSON.stringify(dataObject))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
FluFilledButton{
|
||||||
|
text:"删除"
|
||||||
|
topPadding:3
|
||||||
|
bottomPadding:3
|
||||||
|
leftPadding:3
|
||||||
|
rightPadding:3
|
||||||
|
onClicked:{
|
||||||
|
showError(JSON.stringify(dataObject))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadData(page,count){
|
||||||
|
const dataSource = []
|
||||||
|
for(var i=0;i<count;i++){
|
||||||
|
dataSource.push({
|
||||||
|
name: "孙悟空%1".arg(((page-1)*count+i)),
|
||||||
|
age: 500,
|
||||||
|
address: "钟灵毓秀的花果山,如神仙仙境的水帘洞",
|
||||||
|
nickname: "齐天大圣",
|
||||||
|
action:com_action
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
table_view.dataSource = dataSource
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
@ -3,6 +3,7 @@ import QtQuick.Controls
|
|||||||
import QtQuick.Layouts
|
import QtQuick.Layouts
|
||||||
import QtQuick.Window
|
import QtQuick.Window
|
||||||
import FluentUI
|
import FluentUI
|
||||||
|
import "./component"
|
||||||
|
|
||||||
FluScrollablePage{
|
FluScrollablePage{
|
||||||
|
|
||||||
@ -10,32 +11,122 @@ FluScrollablePage{
|
|||||||
leftPadding:10
|
leftPadding:10
|
||||||
rightPadding:10
|
rightPadding:10
|
||||||
bottomPadding:20
|
bottomPadding:20
|
||||||
|
spacing: 0
|
||||||
|
|
||||||
|
FluArea{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
height: 68
|
||||||
|
paddings: 10
|
||||||
|
Layout.topMargin: 20
|
||||||
|
|
||||||
FluTextBox{
|
FluTextBox{
|
||||||
Layout.topMargin: 20
|
Layout.topMargin: 20
|
||||||
placeholderText: "单行输入框"
|
placeholderText: "单行输入框"
|
||||||
Layout.preferredWidth: 300
|
Layout.preferredWidth: 300
|
||||||
disabled:toggle_switch.selected
|
disabled:text_box_switch.selected
|
||||||
|
anchors{
|
||||||
|
verticalCenter: parent.verticalCenter
|
||||||
|
left: parent.left
|
||||||
}
|
}
|
||||||
FluMultilineTextBox{
|
|
||||||
Layout.topMargin: 20
|
|
||||||
Layout.preferredWidth: 300
|
|
||||||
placeholderText: "多行输入框"
|
|
||||||
disabled:toggle_switch.selected
|
|
||||||
}
|
|
||||||
FluAutoSuggestBox{
|
|
||||||
Layout.topMargin: 20
|
|
||||||
items:generateRandomNames(100)
|
|
||||||
placeholderText: "AutoSuggestBox"
|
|
||||||
Layout.preferredWidth: 300
|
|
||||||
disabled:toggle_switch.selected
|
|
||||||
}
|
}
|
||||||
|
|
||||||
FluToggleSwitch{
|
Row{
|
||||||
id:toggle_switch
|
spacing: 5
|
||||||
text:"Disabled"
|
anchors{
|
||||||
Layout.topMargin: 20
|
verticalCenter: parent.verticalCenter
|
||||||
|
right: parent.right
|
||||||
}
|
}
|
||||||
|
FluToggleSwitch{
|
||||||
|
id:text_box_switch
|
||||||
|
Layout.alignment: Qt.AlignRight
|
||||||
|
text:"Disabled"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
CodeExpander{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
code:'FluTextBox{
|
||||||
|
placeholderText:"单行输入框"
|
||||||
|
}'
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
FluArea{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
height: 68
|
||||||
|
paddings: 10
|
||||||
|
Layout.topMargin: 20
|
||||||
|
|
||||||
|
FluMultilineTextBox{
|
||||||
|
Layout.topMargin: 20
|
||||||
|
placeholderText: "多行输入框"
|
||||||
|
Layout.preferredWidth: 300
|
||||||
|
disabled:text_box_multi_switch.selected
|
||||||
|
anchors{
|
||||||
|
verticalCenter: parent.verticalCenter
|
||||||
|
left: parent.left
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Row{
|
||||||
|
spacing: 5
|
||||||
|
anchors{
|
||||||
|
verticalCenter: parent.verticalCenter
|
||||||
|
right: parent.right
|
||||||
|
}
|
||||||
|
FluToggleSwitch{
|
||||||
|
id:text_box_multi_switch
|
||||||
|
Layout.alignment: Qt.AlignRight
|
||||||
|
text:"Disabled"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
CodeExpander{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
code:'FluMultilineTextBox{
|
||||||
|
placeholderText:"多行输入框"
|
||||||
|
}'
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
FluArea{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
height: 68
|
||||||
|
paddings: 10
|
||||||
|
Layout.topMargin: 20
|
||||||
|
|
||||||
|
FluAutoSuggestBox{
|
||||||
|
Layout.topMargin: 20
|
||||||
|
placeholderText: "AutoSuggestBox"
|
||||||
|
Layout.preferredWidth: 300
|
||||||
|
items:generateRandomNames(100)
|
||||||
|
disabled:text_box_suggest_switch.selected
|
||||||
|
anchors{
|
||||||
|
verticalCenter: parent.verticalCenter
|
||||||
|
left: parent.left
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Row{
|
||||||
|
spacing: 5
|
||||||
|
anchors{
|
||||||
|
verticalCenter: parent.verticalCenter
|
||||||
|
right: parent.right
|
||||||
|
}
|
||||||
|
FluToggleSwitch{
|
||||||
|
id:text_box_suggest_switch
|
||||||
|
Layout.alignment: Qt.AlignRight
|
||||||
|
text:"Disabled"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
CodeExpander{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
code:'FluAutoSuggestBox{
|
||||||
|
placeholderText:"AutoSuggestBox"
|
||||||
|
}'
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
function generateRandomNames(numNames) {
|
function generateRandomNames(numNames) {
|
||||||
const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
|
const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
|
||||||
|
@ -3,6 +3,7 @@ import QtQuick.Layouts
|
|||||||
import QtQuick.Window
|
import QtQuick.Window
|
||||||
import QtQuick.Controls
|
import QtQuick.Controls
|
||||||
import FluentUI
|
import FluentUI
|
||||||
|
import "./component"
|
||||||
|
|
||||||
FluScrollablePage{
|
FluScrollablePage{
|
||||||
|
|
||||||
@ -10,9 +11,20 @@ FluScrollablePage{
|
|||||||
leftPadding:10
|
leftPadding:10
|
||||||
rightPadding:10
|
rightPadding:10
|
||||||
bottomPadding:20
|
bottomPadding:20
|
||||||
|
spacing: 0
|
||||||
|
|
||||||
RowLayout{
|
FluArea{
|
||||||
|
Layout.fillWidth: true
|
||||||
Layout.topMargin: 20
|
Layout.topMargin: 20
|
||||||
|
height: 210
|
||||||
|
paddings: 10
|
||||||
|
ColumnLayout{
|
||||||
|
spacing:0
|
||||||
|
anchors{
|
||||||
|
left: parent.left
|
||||||
|
}
|
||||||
|
RowLayout{
|
||||||
|
Layout.topMargin: 10
|
||||||
Repeater{
|
Repeater{
|
||||||
model: [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
|
model: [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
|
||||||
delegate: FluRectangle{
|
delegate: FluRectangle{
|
||||||
@ -43,6 +55,7 @@ FluScrollablePage{
|
|||||||
Layout.topMargin: 20
|
Layout.topMargin: 20
|
||||||
}
|
}
|
||||||
FluToggleSwitch{
|
FluToggleSwitch{
|
||||||
|
Layout.topMargin: 5
|
||||||
selected: FluTheme.dark
|
selected: FluTheme.dark
|
||||||
clickFunc:function(){
|
clickFunc:function(){
|
||||||
FluTheme.dark = !FluTheme.dark
|
FluTheme.dark = !FluTheme.dark
|
||||||
@ -53,9 +66,23 @@ FluScrollablePage{
|
|||||||
Layout.topMargin: 20
|
Layout.topMargin: 20
|
||||||
}
|
}
|
||||||
FluToggleSwitch{
|
FluToggleSwitch{
|
||||||
|
Layout.topMargin: 5
|
||||||
selected: FluTheme.nativeText
|
selected: FluTheme.nativeText
|
||||||
clickFunc:function(){
|
clickFunc:function(){
|
||||||
FluTheme.nativeText = !FluTheme.nativeText
|
FluTheme.nativeText = !FluTheme.nativeText
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
CodeExpander{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
code:'FluTheme.primaryColor = FluColors.Orange
|
||||||
|
|
||||||
|
FluTheme.dark = true
|
||||||
|
|
||||||
|
FluTheme.nativeText = true
|
||||||
|
'
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -3,6 +3,7 @@ import QtQuick.Controls
|
|||||||
import QtQuick.Layouts
|
import QtQuick.Layouts
|
||||||
import QtQuick.Window
|
import QtQuick.Window
|
||||||
import FluentUI
|
import FluentUI
|
||||||
|
import "./component"
|
||||||
|
|
||||||
FluScrollablePage{
|
FluScrollablePage{
|
||||||
|
|
||||||
@ -10,9 +11,10 @@ FluScrollablePage{
|
|||||||
leftPadding:10
|
leftPadding:10
|
||||||
rightPadding:10
|
rightPadding:10
|
||||||
bottomPadding:20
|
bottomPadding:20
|
||||||
|
spacing: 0
|
||||||
|
|
||||||
FluArea{
|
FluArea{
|
||||||
width: parent.width
|
Layout.fillWidth: true
|
||||||
Layout.topMargin: 20
|
Layout.topMargin: 20
|
||||||
height: 80
|
height: 80
|
||||||
paddings: 10
|
paddings: 10
|
||||||
@ -33,10 +35,15 @@ FluScrollablePage{
|
|||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
CodeExpander{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
code:'FluTimePicker{
|
||||||
|
|
||||||
|
}'
|
||||||
|
}
|
||||||
|
|
||||||
FluArea{
|
FluArea{
|
||||||
width: parent.width
|
Layout.fillWidth: true
|
||||||
Layout.topMargin: 20
|
Layout.topMargin: 20
|
||||||
height: 80
|
height: 80
|
||||||
paddings: 10
|
paddings: 10
|
||||||
@ -49,7 +56,7 @@ FluScrollablePage{
|
|||||||
}
|
}
|
||||||
|
|
||||||
FluText{
|
FluText{
|
||||||
text:"hourFormat=FluTimePicker.HH"
|
text:"hourFormat=FluTimePicker.H"
|
||||||
}
|
}
|
||||||
|
|
||||||
FluTimePicker{
|
FluTimePicker{
|
||||||
@ -58,6 +65,11 @@ FluScrollablePage{
|
|||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
CodeExpander{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
code:'FluTimePicker{
|
||||||
|
hourFormat:FluTimePicker.HH
|
||||||
|
}'
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -3,6 +3,7 @@ import QtQuick.Layouts
|
|||||||
import QtQuick.Window
|
import QtQuick.Window
|
||||||
import QtQuick.Controls
|
import QtQuick.Controls
|
||||||
import FluentUI
|
import FluentUI
|
||||||
|
import "./component"
|
||||||
|
|
||||||
FluScrollablePage{
|
FluScrollablePage{
|
||||||
|
|
||||||
@ -10,12 +11,29 @@ FluScrollablePage{
|
|||||||
leftPadding:10
|
leftPadding:10
|
||||||
rightPadding:10
|
rightPadding:10
|
||||||
bottomPadding:20
|
bottomPadding:20
|
||||||
|
spacing: 0
|
||||||
|
|
||||||
FluToggleSwitch{
|
FluArea{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
height: 68
|
||||||
|
paddings: 10
|
||||||
Layout.topMargin: 20
|
Layout.topMargin: 20
|
||||||
|
Row{
|
||||||
|
spacing: 30
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
FluToggleSwitch{
|
||||||
}
|
}
|
||||||
FluToggleSwitch{
|
FluToggleSwitch{
|
||||||
Layout.topMargin: 20
|
|
||||||
text:"Text"
|
text:"Text"
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
CodeExpander{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
code:'FluToggleSwitch{
|
||||||
|
text:"Text"
|
||||||
|
}'
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -3,6 +3,7 @@ import QtQuick.Controls
|
|||||||
import QtQuick.Layouts
|
import QtQuick.Layouts
|
||||||
import QtQuick.Window
|
import QtQuick.Window
|
||||||
import FluentUI
|
import FluentUI
|
||||||
|
import "./component"
|
||||||
|
|
||||||
FluScrollablePage{
|
FluScrollablePage{
|
||||||
|
|
||||||
@ -10,15 +11,15 @@ FluScrollablePage{
|
|||||||
leftPadding:10
|
leftPadding:10
|
||||||
rightPadding:10
|
rightPadding:10
|
||||||
bottomPadding:20
|
bottomPadding:20
|
||||||
|
spacing: 0
|
||||||
|
|
||||||
FluText{
|
FluText{
|
||||||
Layout.topMargin: 20
|
Layout.topMargin: 20
|
||||||
text:"鼠标悬停不动,弹出Tooltip"
|
text:"鼠标悬停不动,弹出Tooltip"
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
FluArea{
|
FluArea{
|
||||||
width: parent.width
|
Layout.fillWidth: true
|
||||||
Layout.topMargin: 20
|
Layout.topMargin: 20
|
||||||
height: 68
|
height: 68
|
||||||
paddings: 10
|
paddings: 10
|
||||||
@ -42,9 +43,21 @@ FluScrollablePage{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
CodeExpander{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
code:'FluIconButton{
|
||||||
|
iconSource:FluentIcons.ChromeCloseContrast
|
||||||
|
iconSize: 15
|
||||||
|
text:"删除"
|
||||||
|
onClicked:{
|
||||||
|
showSuccess("点击IconButton")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
'
|
||||||
|
}
|
||||||
|
|
||||||
FluArea{
|
FluArea{
|
||||||
width: parent.width
|
Layout.fillWidth: true
|
||||||
Layout.topMargin: 20
|
Layout.topMargin: 20
|
||||||
height: 68
|
height: 68
|
||||||
paddings: 10
|
paddings: 10
|
||||||
@ -72,6 +85,22 @@ FluScrollablePage{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
CodeExpander{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
code:'FluButton{
|
||||||
|
id:button_1
|
||||||
|
text:"删除"
|
||||||
|
FluTooltip{
|
||||||
|
visible: button_1.hovered
|
||||||
|
text:button_1.text
|
||||||
|
delay: 1000
|
||||||
|
}
|
||||||
|
onClicked:{
|
||||||
|
showSuccess("点击一个Button")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
'
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -3,13 +3,15 @@ import QtQuick.Layouts
|
|||||||
import QtQuick.Window
|
import QtQuick.Window
|
||||||
import QtQuick.Controls
|
import QtQuick.Controls
|
||||||
import FluentUI
|
import FluentUI
|
||||||
|
import "./component"
|
||||||
|
|
||||||
FluContentPage {
|
FluScrollablePage {
|
||||||
|
|
||||||
title:"TreeView"
|
title:"TreeView"
|
||||||
leftPadding:10
|
leftPadding:10
|
||||||
rightPadding:10
|
rightPadding:10
|
||||||
bottomPadding:20
|
bottomPadding:20
|
||||||
|
spacing: 0
|
||||||
|
|
||||||
function randomName() {
|
function randomName() {
|
||||||
var names = ["张三", "李四", "王五", "赵六", "钱七", "孙八", "周九", "吴十"]
|
var names = ["张三", "李四", "王五", "赵六", "钱七", "孙八", "周九", "吴十"]
|
||||||
@ -50,71 +52,42 @@ FluContentPage {
|
|||||||
return [tree_view.createItem(randomCompany(), true, subtrees)].concat(createOrg(numLevels - 1, numSubtrees, numEmployees))
|
return [tree_view.createItem(randomCompany(), true, subtrees)].concat(createOrg(numLevels - 1, numSubtrees, numEmployees))
|
||||||
}
|
}
|
||||||
|
|
||||||
|
FluArea{
|
||||||
FluTreeView{
|
id:layout_actions
|
||||||
id:tree_view
|
Layout.fillWidth: true
|
||||||
width:240
|
Layout.topMargin: 20
|
||||||
anchors{
|
height: 50
|
||||||
top:parent.top
|
paddings: 10
|
||||||
left:parent.left
|
RowLayout{
|
||||||
bottom:parent.bottom
|
spacing: 14
|
||||||
}
|
FluDropDownButton{
|
||||||
onItemClicked:
|
id:btn_selection_model
|
||||||
(model)=>{
|
Layout.preferredWidth: 140
|
||||||
showSuccess(model.text)
|
text:"None"
|
||||||
}
|
items:[
|
||||||
|
FluMenuItem{
|
||||||
Component.onCompleted: {
|
|
||||||
var org = createOrg(3, 3, 3)
|
|
||||||
updateData(org)
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
ColumnLayout{
|
|
||||||
anchors{
|
|
||||||
left: tree_view.right
|
|
||||||
right: parent.right
|
|
||||||
top: parent.top
|
|
||||||
}
|
|
||||||
|
|
||||||
FluText{
|
|
||||||
text:{
|
|
||||||
if(tree_view.selectionMode === FluTreeView.None){
|
|
||||||
return "selectionMode->FluTreeView.None"
|
|
||||||
}
|
|
||||||
if(tree_view.selectionMode === FluTreeView.Single){
|
|
||||||
return "selectionMode->FluTreeView.Single"
|
|
||||||
}
|
|
||||||
if(tree_view.selectionMode === FluTreeView.Multiple){
|
|
||||||
return "selectionMode->FluTreeView.Multiple"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
FluButton{
|
|
||||||
text:"None"
|
text:"None"
|
||||||
onClicked: {
|
onClicked: {
|
||||||
tree_view.selectionMode = FluTreeView.None
|
btn_selection_model.text = text
|
||||||
|
tree_view.selectionMode = FluTabView.Equal
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
FluMenuItem{
|
||||||
FluButton{
|
|
||||||
text:"Single"
|
text:"Single"
|
||||||
onClicked: {
|
onClicked: {
|
||||||
tree_view.selectionMode = FluTreeView.Single
|
btn_selection_model.text = text
|
||||||
|
tree_view.selectionMode = FluTabView.SizeToContent
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
FluMenuItem{
|
||||||
FluButton{
|
text:"Muiltple"
|
||||||
text:"Multiple"
|
|
||||||
onClicked: {
|
onClicked: {
|
||||||
tree_view.selectionMode = FluTreeView.Multiple
|
btn_selection_model.text = text
|
||||||
|
tree_view.selectionMode = FluTabView.Compact
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
FluFilledButton{
|
FluFilledButton{
|
||||||
text:"获取选中的数据"
|
text:"获取选中的数据"
|
||||||
onClicked: {
|
onClicked: {
|
||||||
@ -139,6 +112,50 @@ FluContentPage {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
FluArea{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
Layout.topMargin: 10
|
||||||
|
paddings: 10
|
||||||
|
height: 400
|
||||||
|
FluTreeView{
|
||||||
|
id:tree_view
|
||||||
|
width:240
|
||||||
|
anchors{
|
||||||
|
top:parent.top
|
||||||
|
left:parent.left
|
||||||
|
bottom:parent.bottom
|
||||||
|
}
|
||||||
|
onItemClicked:
|
||||||
|
(model)=>{
|
||||||
|
showSuccess(model.text)
|
||||||
|
}
|
||||||
|
|
||||||
|
Component.onCompleted: {
|
||||||
|
var org = createOrg(3, 3, 3)
|
||||||
|
createItem()
|
||||||
|
updateData(org)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
CodeExpander{
|
||||||
|
Layout.fillWidth: true
|
||||||
|
code:'FluTreeView{
|
||||||
|
id:tree_view
|
||||||
|
width:240
|
||||||
|
height:600
|
||||||
|
Component.onCompleted: {
|
||||||
|
var datas = []
|
||||||
|
datas.push(createItem("Node1",false))
|
||||||
|
datas.push(createItem("Node2",false))
|
||||||
|
datas.push(createItem("Node2",true,[createItem("Node2-1",false),createItem("Node2-2",false)]))
|
||||||
|
updateData(datas)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
'
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
@ -15,15 +15,19 @@ FluContentPage {
|
|||||||
slider.seek(0)
|
slider.seek(0)
|
||||||
}
|
}
|
||||||
|
|
||||||
ScrollView{
|
FluArea{
|
||||||
clip: true
|
anchors{
|
||||||
width: parent.width
|
top:parent.top
|
||||||
contentWidth: parent.width
|
left: parent.left
|
||||||
|
right: parent.right
|
||||||
|
bottom: parent.bottom
|
||||||
|
topMargin: 20
|
||||||
|
}
|
||||||
|
paddings: 10
|
||||||
ColumnLayout{
|
ColumnLayout{
|
||||||
spacing: 0
|
spacing: 0
|
||||||
FluText{
|
FluText{
|
||||||
text:"Display"
|
text:"Display"
|
||||||
Layout.topMargin: 20
|
|
||||||
padding: 0
|
padding: 0
|
||||||
pixelSize: textSize
|
pixelSize: textSize
|
||||||
fontStyle: FluText.Display
|
fontStyle: FluText.Display
|
||||||
@ -65,8 +69,6 @@ FluContentPage {
|
|||||||
fontStyle: FluText.Caption
|
fontStyle: FluText.Caption
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
FluSlider{
|
FluSlider{
|
||||||
id:slider
|
id:slider
|
||||||
@ -82,4 +84,11 @@ FluContentPage {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
125
example/component/CodeExpander.qml
Normal file
125
example/component/CodeExpander.qml
Normal file
@ -0,0 +1,125 @@
|
|||||||
|
import QtQuick
|
||||||
|
import QtQuick.Layouts
|
||||||
|
import QtQuick.Window
|
||||||
|
import QtQuick.Controls
|
||||||
|
import FluentUI
|
||||||
|
|
||||||
|
FluExpander{
|
||||||
|
|
||||||
|
property string code: ""
|
||||||
|
|
||||||
|
headerText: "Source"
|
||||||
|
contentHeight:content.height
|
||||||
|
|
||||||
|
FluMultilineTextBox{
|
||||||
|
id:content
|
||||||
|
width:parent.width
|
||||||
|
readOnly:true
|
||||||
|
text:highlightQmlCode(code)
|
||||||
|
focus:false
|
||||||
|
textFormat: FluMultilineTextBox.RichText
|
||||||
|
KeyNavigation.priority: KeyNavigation.BeforeItem
|
||||||
|
background:Rectangle{
|
||||||
|
radius: 4
|
||||||
|
color:FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1)
|
||||||
|
border.color: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
|
||||||
|
border.width: 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
FluIconButton{
|
||||||
|
iconSource:FluentIcons.Copy
|
||||||
|
anchors{
|
||||||
|
right: parent.right
|
||||||
|
top: parent.top
|
||||||
|
rightMargin: 5
|
||||||
|
topMargin: 5
|
||||||
|
}
|
||||||
|
onClicked:{
|
||||||
|
FluApp.clipText(content.text)
|
||||||
|
showSuccess("复制成功")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function htmlEncode(e){
|
||||||
|
var i,s;
|
||||||
|
for(i in s={
|
||||||
|
"&":/&/g,//""//":/"/g,"'":/'/g,
|
||||||
|
"<":/</g,">":/>/g,"<br/>":/\n/g,
|
||||||
|
" ":/ /g," ":/\t/g
|
||||||
|
})e=e.replace(s[i],i);
|
||||||
|
return e;
|
||||||
|
}
|
||||||
|
|
||||||
|
function highlightQmlCode(code) {
|
||||||
|
// 定义 QML 关键字列表
|
||||||
|
var qmlKeywords = [
|
||||||
|
"FluTextButton",
|
||||||
|
"FluAppBar",
|
||||||
|
"FluAutoSuggestBox",
|
||||||
|
"FluBadge",
|
||||||
|
"FluButton",
|
||||||
|
"FluCalendarPicker",
|
||||||
|
"FluCalendarView",
|
||||||
|
"FluCarousel",
|
||||||
|
"FluCheckBox",
|
||||||
|
"FluColorPicker",
|
||||||
|
"FluColorView",
|
||||||
|
"FluComboBox",
|
||||||
|
"FluContentDialog",
|
||||||
|
"FluContentPage",
|
||||||
|
"FluControl",
|
||||||
|
"FluDatePicker",
|
||||||
|
"FluDivider",
|
||||||
|
"FluDropDownButton",
|
||||||
|
"FluExpander",
|
||||||
|
"FluFilledButton",
|
||||||
|
"FluFlipView",
|
||||||
|
"FluFocusRectangle",
|
||||||
|
"FluIcon",
|
||||||
|
"FluIconButton",
|
||||||
|
"FluInfoBar",
|
||||||
|
"FluItem",
|
||||||
|
"FluMediaPlayer",
|
||||||
|
"FluMenu",
|
||||||
|
"FluMenuItem",
|
||||||
|
"FluMultilineTextBox",
|
||||||
|
"FluNavigationView",
|
||||||
|
"FluObject",
|
||||||
|
"FluPaneItem",
|
||||||
|
"FluPaneItemExpander",
|
||||||
|
"FluPaneItemHeader",
|
||||||
|
"FluPaneItemSeparator",
|
||||||
|
"FluPivot",
|
||||||
|
"FluPivotItem",
|
||||||
|
"FluProgressBar",
|
||||||
|
"FluProgressRing",
|
||||||
|
"FluRadioButton",
|
||||||
|
"FluRectangle",
|
||||||
|
"FluScrollablePage",
|
||||||
|
"FluScrollBar",
|
||||||
|
"FluShadow",
|
||||||
|
"FluSlider",
|
||||||
|
"FluTabView",
|
||||||
|
"FluText",
|
||||||
|
"FluTextArea",
|
||||||
|
"FluTextBox",
|
||||||
|
"FluTextBoxBackground",
|
||||||
|
"FluTextBoxMenu",
|
||||||
|
"FluTextButton",
|
||||||
|
"FluTextFiled",
|
||||||
|
"FluTimePicker",
|
||||||
|
"FluToggleSwitch",
|
||||||
|
"FluTooltip",
|
||||||
|
"FluTreeView",
|
||||||
|
"FluWindow",
|
||||||
|
"FluWindowResize"
|
||||||
|
];
|
||||||
|
code = code.replace(/\n/g, "<br>");
|
||||||
|
code = code.replace(/ /g, " ");
|
||||||
|
return code.replace(RegExp("\\b(" + qmlKeywords.join("|") + ")\\b", "g"), "<span style='color: #c23a80'>$1</span>");
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
@ -23,21 +23,15 @@ CONFIG(debug,debug|release) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
win32 {
|
win32 {
|
||||||
contains(QT_ARCH, i386) {
|
|
||||||
COPYDLL = $$absolute_path($${_PRO_FILE_PWD_}/../third/Win_x86/*.dll) $$DESTDIR
|
contains(QMAKE_CC, cl) {
|
||||||
contains(QMAKE_CC, cl) {
|
COPYDLL = $$absolute_path($${_PRO_FILE_PWD_}/../third/msvc/*.dll) $$DESTDIR
|
||||||
QMAKE_PRE_LINK += $$QMAKE_COPY $$replace(COPYDLL, /, \\)
|
QMAKE_PRE_LINK += $$QMAKE_COPY $$replace(COPYDLL, /, $$QMAKE_DIR_SEP)
|
||||||
} else {
|
|
||||||
QMAKE_PRE_LINK += $$QMAKE_COPY $$COPYDLL
|
|
||||||
}
|
|
||||||
} else {
|
} else {
|
||||||
COPYDLL = $$absolute_path($${_PRO_FILE_PWD_}/../third/Win_x64/*.dll) $$DESTDIR
|
COPYDLL = $$absolute_path($${_PRO_FILE_PWD_}/../third/mingw/*.dll) $$DESTDIR
|
||||||
contains(QMAKE_CC, cl) {
|
QMAKE_PRE_LINK += $$QMAKE_COPY $$replace(COPYDLL, /, $$QMAKE_DIR_SEP)
|
||||||
QMAKE_PRE_LINK += $$QMAKE_COPY $$replace(COPYDLL, /, \\)
|
|
||||||
} else {
|
|
||||||
QMAKE_PRE_LINK += $$QMAKE_COPY $$COPYDLL
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
qnx: target.path = /tmp/$${TARGET}/bin
|
qnx: target.path = /tmp/$${TARGET}/bin
|
||||||
|
@ -3,7 +3,6 @@
|
|||||||
import QtQuick
|
import QtQuick
|
||||||
import FluentUI
|
import FluentUI
|
||||||
|
|
||||||
|
|
||||||
FluObject{
|
FluObject{
|
||||||
|
|
||||||
property var navigationView
|
property var navigationView
|
||||||
@ -19,7 +18,6 @@ FluObject{
|
|||||||
FluPaneItemExpander{
|
FluPaneItemExpander{
|
||||||
title:"Basic input"
|
title:"Basic input"
|
||||||
icon:FluentIcons.CheckboxComposite
|
icon:FluentIcons.CheckboxComposite
|
||||||
|
|
||||||
FluPaneItem{
|
FluPaneItem{
|
||||||
title:"Buttons"
|
title:"Buttons"
|
||||||
image:"qrc:/res/image/control/Button.png"
|
image:"qrc:/res/image/control/Button.png"
|
||||||
@ -38,7 +36,6 @@ FluObject{
|
|||||||
navigationView.push("qrc:/T_Slider.qml")
|
navigationView.push("qrc:/T_Slider.qml")
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
FluPaneItem{
|
FluPaneItem{
|
||||||
title:"CheckBox"
|
title:"CheckBox"
|
||||||
image:"qrc:/res/image/control/Checkbox.png"
|
image:"qrc:/res/image/control/Checkbox.png"
|
||||||
@ -48,7 +45,6 @@ FluObject{
|
|||||||
navigationView.push("qrc:/T_CheckBox.qml")
|
navigationView.push("qrc:/T_CheckBox.qml")
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
FluPaneItem{
|
FluPaneItem{
|
||||||
title:"ToggleSwitch"
|
title:"ToggleSwitch"
|
||||||
onTap:{
|
onTap:{
|
||||||
@ -92,11 +88,9 @@ FluObject{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
FluPaneItemExpander{
|
FluPaneItemExpander{
|
||||||
title:"Surface"
|
title:"Surface"
|
||||||
icon:FluentIcons.SurfaceHub
|
icon:FluentIcons.SurfaceHub
|
||||||
|
|
||||||
FluPaneItem{
|
FluPaneItem{
|
||||||
title:"InfoBar"
|
title:"InfoBar"
|
||||||
image:"qrc:/res/image/control/InfoBar.png"
|
image:"qrc:/res/image/control/InfoBar.png"
|
||||||
@ -106,42 +100,36 @@ FluObject{
|
|||||||
navigationView.push("qrc:/T_InfoBar.qml")
|
navigationView.push("qrc:/T_InfoBar.qml")
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
FluPaneItem{
|
FluPaneItem{
|
||||||
title:"Progress"
|
title:"Progress"
|
||||||
onTap:{
|
onTap:{
|
||||||
navigationView.push("qrc:/T_Progress.qml")
|
navigationView.push("qrc:/T_Progress.qml")
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
FluPaneItem{
|
FluPaneItem{
|
||||||
title:"Badge"
|
title:"Badge"
|
||||||
onTap:{
|
onTap:{
|
||||||
navigationView.push("qrc:/T_Badge.qml")
|
navigationView.push("qrc:/T_Badge.qml")
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
FluPaneItem{
|
FluPaneItem{
|
||||||
title:"Rectangle"
|
title:"Rectangle"
|
||||||
onTap:{
|
onTap:{
|
||||||
navigationView.push("qrc:/T_Rectangle.qml")
|
navigationView.push("qrc:/T_Rectangle.qml")
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
FluPaneItem{
|
FluPaneItem{
|
||||||
title:"Carousel"
|
title:"Carousel"
|
||||||
onTap:{
|
onTap:{
|
||||||
navigationView.push("qrc:/T_Carousel.qml")
|
navigationView.push("qrc:/T_Carousel.qml")
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
FluPaneItem{
|
FluPaneItem{
|
||||||
title:"Expander"
|
title:"Expander"
|
||||||
onTap:{
|
onTap:{
|
||||||
navigationView.push("qrc:/T_Expander.qml")
|
navigationView.push("qrc:/T_Expander.qml")
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
FluPaneItemExpander{
|
FluPaneItemExpander{
|
||||||
@ -153,14 +141,12 @@ FluObject{
|
|||||||
navigationView.push("qrc:/T_Dialog.qml")
|
navigationView.push("qrc:/T_Dialog.qml")
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
FluPaneItem{
|
FluPaneItem{
|
||||||
title:"Tooltip"
|
title:"Tooltip"
|
||||||
onTap:{
|
onTap:{
|
||||||
navigationView.push("qrc:/T_Tooltip.qml")
|
navigationView.push("qrc:/T_Tooltip.qml")
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
FluPaneItem{
|
FluPaneItem{
|
||||||
title:"Menu"
|
title:"Menu"
|
||||||
onTap:{
|
onTap:{
|
||||||
@ -172,10 +158,21 @@ FluObject{
|
|||||||
FluPaneItemExpander{
|
FluPaneItemExpander{
|
||||||
title:"Navigation"
|
title:"Navigation"
|
||||||
icon:FluentIcons.AllApps
|
icon:FluentIcons.AllApps
|
||||||
|
FluPaneItem{
|
||||||
|
title:"Pivot"
|
||||||
|
image:"qrc:/res/image/control/Pivot.png"
|
||||||
|
recentlyAdded:true
|
||||||
|
order:3
|
||||||
|
desc:"Presents information from different sources in atabbed view."
|
||||||
|
onTap:{
|
||||||
|
navigationView.push("qrc:/T_Pivot.qml")
|
||||||
|
}
|
||||||
|
}
|
||||||
FluPaneItem{
|
FluPaneItem{
|
||||||
title:"TabView"
|
title:"TabView"
|
||||||
image:"qrc:/res/image/control/TabView.png"
|
image:"qrc:/res/image/control/TabView.png"
|
||||||
recentlyAdded:true
|
recentlyAdded:true
|
||||||
|
order:1
|
||||||
desc:"A control that displays a collection of tabs thatcan be used to display several documents."
|
desc:"A control that displays a collection of tabs thatcan be used to display several documents."
|
||||||
onTap:{
|
onTap:{
|
||||||
navigationView.push("qrc:/T_TabView.qml")
|
navigationView.push("qrc:/T_TabView.qml")
|
||||||
@ -187,15 +184,33 @@ FluObject{
|
|||||||
navigationView.push("qrc:/T_TreeView.qml")
|
navigationView.push("qrc:/T_TreeView.qml")
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
FluPaneItem{
|
||||||
|
title:"TableView"
|
||||||
|
image:"qrc:/res/image/control/DataGrid.png"
|
||||||
|
recentlyAdded:true
|
||||||
|
order:4
|
||||||
|
desc:"The TableView control provides a flexible way to display a collection of data in rows and columns"
|
||||||
|
onTap:{
|
||||||
|
navigationView.push("qrc:/T_TableView.qml")
|
||||||
|
}
|
||||||
|
}
|
||||||
FluPaneItem{
|
FluPaneItem{
|
||||||
title:"MultiWindow"
|
title:"MultiWindow"
|
||||||
onTap:{
|
onTap:{
|
||||||
navigationView.push("qrc:/T_MultiWindow.qml")
|
navigationView.push("qrc:/T_MultiWindow.qml")
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
FluPaneItem{
|
||||||
|
title:"FlipView"
|
||||||
|
image:"qrc:/res/image/control/FlipView.png"
|
||||||
|
recentlyAdded:true
|
||||||
|
order:2
|
||||||
|
desc:"Presents a collection of items that the user canflip through, one item at a time."
|
||||||
|
onTap:{
|
||||||
|
navigationView.push("qrc:/T_FlipView.qml")
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
FluPaneItemExpander{
|
FluPaneItemExpander{
|
||||||
title:"Theming"
|
title:"Theming"
|
||||||
@ -206,19 +221,18 @@ FluObject{
|
|||||||
navigationView.push("qrc:/T_Theme.qml")
|
navigationView.push("qrc:/T_Theme.qml")
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
FluPaneItem{
|
|
||||||
title:"Awesome"
|
|
||||||
onTap:{
|
|
||||||
navigationView.push("qrc:/T_Awesome.qml")
|
|
||||||
}
|
|
||||||
}
|
|
||||||
FluPaneItem{
|
FluPaneItem{
|
||||||
title:"Typography"
|
title:"Typography"
|
||||||
onTap:{
|
onTap:{
|
||||||
navigationView.push("qrc:/T_Typography.qml")
|
navigationView.push("qrc:/T_Typography.qml")
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
FluPaneItem{
|
||||||
|
title:"Awesome"
|
||||||
|
onTap:{
|
||||||
|
navigationView.push("qrc:/T_Awesome.qml")
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
FluPaneItemExpander{
|
FluPaneItemExpander{
|
||||||
@ -228,6 +242,7 @@ FluObject{
|
|||||||
title:"MediaPlayer"
|
title:"MediaPlayer"
|
||||||
image:"qrc:/res/image/control/MediaPlayerElement.png"
|
image:"qrc:/res/image/control/MediaPlayerElement.png"
|
||||||
recentlyAdded:true
|
recentlyAdded:true
|
||||||
|
order:0
|
||||||
desc:"A control to display video and image content."
|
desc:"A control to display video and image content."
|
||||||
onTap:{
|
onTap:{
|
||||||
navigationView.push("qrc:/T_MediaPlayer.qml")
|
navigationView.push("qrc:/T_MediaPlayer.qml")
|
||||||
@ -251,6 +266,7 @@ FluObject{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
arr.sort(function(o1,o2){ return o2.order-o1.order })
|
||||||
return arr
|
return arr
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -36,7 +36,7 @@ FluWindow {
|
|||||||
fontStyle: FluText.Title
|
fontStyle: FluText.Title
|
||||||
}
|
}
|
||||||
FluText{
|
FluText{
|
||||||
text:"v1.1.8"
|
text:"v1.2.1"
|
||||||
fontStyle: FluText.Body
|
fontStyle: FluText.Body
|
||||||
Layout.alignment: Qt.AlignBottom
|
Layout.alignment: Qt.AlignBottom
|
||||||
}
|
}
|
||||||
|
@ -183,7 +183,7 @@ FluWindow {
|
|||||||
rightMargin: 10
|
rightMargin: 10
|
||||||
}
|
}
|
||||||
height: Math.min(textbox.implicitHeight,64)
|
height: Math.min(textbox.implicitHeight,64)
|
||||||
FluMultiLineTextBox{
|
FluMultilineTextBox{
|
||||||
id:textbox
|
id:textbox
|
||||||
focus:true
|
focus:true
|
||||||
placeholderText: "请输入消息"
|
placeholderText: "请输入消息"
|
||||||
|
@ -153,5 +153,9 @@
|
|||||||
<file>global/qmldir</file>
|
<file>global/qmldir</file>
|
||||||
<file>global/ItemsFooter.qml</file>
|
<file>global/ItemsFooter.qml</file>
|
||||||
<file>page/MediaPage.qml</file>
|
<file>page/MediaPage.qml</file>
|
||||||
|
<file>T_FlipView.qml</file>
|
||||||
|
<file>T_Pivot.qml</file>
|
||||||
|
<file>component/CodeExpander.qml</file>
|
||||||
|
<file>T_TableView.qml</file>
|
||||||
</qresource>
|
</qresource>
|
||||||
</RCC>
|
</RCC>
|
||||||
|
34
scripts/windows-mingw-publish.ps1
Normal file
34
scripts/windows-mingw-publish.ps1
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
[CmdletBinding()]
|
||||||
|
param (
|
||||||
|
[string] $archiveName, [string] $targetName
|
||||||
|
)
|
||||||
|
# 外部环境变量包括:
|
||||||
|
# archiveName: ${{ matrix.qt_ver }}-${{ matrix.qt_arch }}
|
||||||
|
|
||||||
|
|
||||||
|
# archiveName: 5.15.2-win64_mingw81
|
||||||
|
|
||||||
|
$scriptDir = $PSScriptRoot
|
||||||
|
$currentDir = Get-Location
|
||||||
|
Write-Host "currentDir" $currentDir
|
||||||
|
Write-Host "scriptDir" $scriptDir
|
||||||
|
|
||||||
|
function Main() {
|
||||||
|
|
||||||
|
New-Item -ItemType Directory $archiveName
|
||||||
|
# 拷贝exe
|
||||||
|
Copy-Item bin\release\* $archiveName\
|
||||||
|
# 拷贝依赖
|
||||||
|
windeployqt --qmldir . --plugindir $archiveName\plugins --no-translations --compiler-runtime $archiveName\$targetName
|
||||||
|
# 删除不必要的文件
|
||||||
|
$excludeList = @("*.qmlc", "*.ilk", "*.exp", "*.lib", "*.pdb")
|
||||||
|
Remove-Item -Path $archiveName -Include $excludeList -Recurse -Force
|
||||||
|
# 打包zip
|
||||||
|
Compress-Archive -Path $archiveName $archiveName'.zip'
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($null -eq $archiveName || $null -eq $targetName) {
|
||||||
|
Write-Host "args missing, archiveName is" $archiveName ", targetName is" $targetName
|
||||||
|
return
|
||||||
|
}
|
||||||
|
Main
|
@ -45,12 +45,13 @@ else()
|
|||||||
set(TARGET_SOURCES ${TARGET_SOURCES} FramelessView_unix.cpp)
|
set(TARGET_SOURCES ${TARGET_SOURCES} FramelessView_unix.cpp)
|
||||||
endif()
|
endif()
|
||||||
|
|
||||||
|
add_definitions(-DVERSION_IN="1.0.0")
|
||||||
|
add_definitions(-DVURI_STR="FluentUI")
|
||||||
|
|
||||||
add_library(${PROJECT_NAME} ${TARGET_TYPE} ${TARGET_SOURCES} ${TARGET_HEADERS} ${TARGET_RESOURCES})
|
add_library(${PROJECT_NAME} ${TARGET_TYPE} ${TARGET_SOURCES} ${TARGET_HEADERS} ${TARGET_RESOURCES})
|
||||||
|
|
||||||
set_target_properties(${PROJECT_NAME} PROPERTIES LIBRARY_OUTPUT_DIRECTORY ${CMAKE_BINARY_DIR}/bin/FluentUI)
|
set_target_properties(${PROJECT_NAME} PROPERTIES LIBRARY_OUTPUT_DIRECTORY ${CMAKE_BINARY_DIR}/bin/FluentUI)
|
||||||
|
|
||||||
target_compile_definitions(${PROJECT_NAME} PRIVATE VERSION_IN=\\\"1.0.0\\\" URI_STR=\\\"FluentUI\\\")
|
|
||||||
|
|
||||||
if(WIN32)
|
if(WIN32)
|
||||||
target_link_libraries(${PROJECT_NAME} PRIVATE dwmapi user32)
|
target_link_libraries(${PROJECT_NAME} PRIVATE dwmapi user32)
|
||||||
else()
|
else()
|
||||||
|
@ -22,7 +22,7 @@ Fluent *Fluent::getInstance()
|
|||||||
|
|
||||||
QString Fluent::version() const
|
QString Fluent::version() const
|
||||||
{
|
{
|
||||||
return QStringLiteral("1.0.0");
|
return QStringLiteral(VERSION_IN);
|
||||||
}
|
}
|
||||||
|
|
||||||
void Fluent::registerTypes(const char *uri){
|
void Fluent::registerTypes(const char *uri){
|
||||||
@ -33,6 +33,11 @@ void Fluent::registerTypes(const char *uri){
|
|||||||
qmlRegisterType<WindowHelper>(uri,major,minor,"WindowHelper");
|
qmlRegisterType<WindowHelper>(uri,major,minor,"WindowHelper");
|
||||||
qmlRegisterType<FluColorSet>(uri,major,minor,"FluColorSet");
|
qmlRegisterType<FluColorSet>(uri,major,minor,"FluColorSet");
|
||||||
|
|
||||||
|
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluToggleButton.qml"),uri,major,minor,"FluToggleButton");
|
||||||
|
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluTableView.qml"),uri,major,minor,"FluTableView");
|
||||||
|
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluPivotItem.qml"),uri,major,minor,"FluPivotItem");
|
||||||
|
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluPivot.qml"),uri,major,minor,"FluPivot");
|
||||||
|
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluFlipView.qml"),uri,major,minor,"FluFlipView");
|
||||||
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluPaneItemExpander.qml"),uri,major,minor,"FluPaneItemExpander");
|
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluPaneItemExpander.qml"),uri,major,minor,"FluPaneItemExpander");
|
||||||
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluTabView.qml"),uri,major,minor,"FluTabView");
|
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluTabView.qml"),uri,major,minor,"FluTabView");
|
||||||
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluArea.qml"),uri,major,minor,"FluArea");
|
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluArea.qml"),uri,major,minor,"FluArea");
|
||||||
|
@ -1,25 +1,17 @@
|
|||||||
OUTP = $$OUT_PWD/../bin/FluentUI
|
OUTP = $$OUT_PWD/../bin/FluentUI
|
||||||
BUILDBIN_PATH = $$replace(OUTP, src/../bin, bin)
|
BUILDBIN_PATH = $$replace(OUTP, src/../bin, bin)
|
||||||
message("----------------->")
|
|
||||||
message($$OUTP)
|
|
||||||
message($$BUILDBIN_PATH)
|
|
||||||
QTQMLFLUENT_PATH = $$[QT_INSTALL_QML]/FluentUI
|
QTQMLFLUENT_PATH = $$[QT_INSTALL_QML]/FluentUI
|
||||||
PRESET_PATH = $$PWD/build-preset
|
PRESET_PATH = $$PWD/build-preset
|
||||||
SOLIBFILE_PATH = $$OUT_PWD/libFluentUI.so
|
SOLIBFILE_PATH = $$OUT_PWD/libFluentUI.so
|
||||||
ANDROID = NO
|
ANDROID = NO
|
||||||
|
|
||||||
android{
|
android{
|
||||||
ANDROID=YES
|
ANDROID=YES
|
||||||
QMAKE_PRE_LINK *= md $$replace(OUTP, /, \\)
|
QMAKE_PRE_LINK *= md $$replace(OUTP, /, \\)
|
||||||
}else{
|
}else{
|
||||||
DESTDIR += $$OUTP
|
DESTDIR += $$OUTP
|
||||||
}
|
}
|
||||||
|
|
||||||
SHAREDSCRIPT = "$$PWD\win_install.bat" SHARED "$$PWD" "$$PRESET_PATH" "$$BUILDBIN_PATH" "$$QTQMLFLUENT_PATH" $$ANDROID "$$SOLIBFILE_PATH"
|
SHAREDSCRIPT = "$$PWD\win_install.bat" SHARED "$$PWD" "$$PRESET_PATH" "$$BUILDBIN_PATH" "$$QTQMLFLUENT_PATH" $$ANDROID "$$SOLIBFILE_PATH"
|
||||||
STATICSCRIPT = "$$PWD\win_install.bat" STATIC "$$PWD" "$$PRESET_PATH" "$$BUILDBIN_PATH" "$$QTQMLFLUENT_PATH" $$ANDROID "$$SOLIBFILE_PATH"
|
STATICSCRIPT = "$$PWD\win_install.bat" STATIC "$$PWD" "$$PRESET_PATH" "$$BUILDBIN_PATH" "$$QTQMLFLUENT_PATH" $$ANDROID "$$SOLIBFILE_PATH"
|
||||||
|
|
||||||
message("-------------------------")
|
|
||||||
message($$SHAREDSCRIPT)
|
|
||||||
CONFIG(sharedlib){
|
CONFIG(sharedlib){
|
||||||
QMAKE_POST_LINK *= $$replace(SHAREDSCRIPT, /, \\)
|
QMAKE_POST_LINK *= $$replace(SHAREDSCRIPT, /, \\)
|
||||||
}
|
}
|
||||||
|
@ -93,7 +93,7 @@ Rectangle{
|
|||||||
iconSize: 11
|
iconSize: 11
|
||||||
text:minimizeText
|
text:minimizeText
|
||||||
radius: 0
|
radius: 0
|
||||||
textColor: root.textColor
|
iconColor: root.textColor
|
||||||
color: hovered ? minimizeHoverColor : minimizeNormalColor
|
color: hovered ? minimizeHoverColor : minimizeNormalColor
|
||||||
onClicked: {
|
onClicked: {
|
||||||
d.win.showMinimized()
|
d.win.showMinimized()
|
||||||
@ -107,7 +107,7 @@ Rectangle{
|
|||||||
Layout.alignment: Qt.AlignVCenter
|
Layout.alignment: Qt.AlignVCenter
|
||||||
visible: d.resizable
|
visible: d.resizable
|
||||||
radius: 0
|
radius: 0
|
||||||
textColor: root.textColor
|
iconColor: root.textColor
|
||||||
text:d.isRestore?restoreText:maximizeText
|
text:d.isRestore?restoreText:maximizeText
|
||||||
iconSize: 11
|
iconSize: 11
|
||||||
onClicked: {
|
onClicked: {
|
||||||
@ -122,7 +122,7 @@ Rectangle{
|
|||||||
height: 30
|
height: 30
|
||||||
radius: 0
|
radius: 0
|
||||||
iconSize: 10
|
iconSize: 10
|
||||||
textColor: hovered ? Qt.rgba(1,1,1,1) : root.textColor
|
iconColor: hovered ? Qt.rgba(1,1,1,1) : root.textColor
|
||||||
color:hovered ? closeHoverColor : closeNormalColor
|
color:hovered ? closeHoverColor : closeNormalColor
|
||||||
onClicked: {
|
onClicked: {
|
||||||
d.win.close()
|
d.win.close()
|
||||||
|
@ -2,133 +2,20 @@
|
|||||||
import QtQuick.Controls
|
import QtQuick.Controls
|
||||||
import FluentUI
|
import FluentUI
|
||||||
|
|
||||||
TextField{
|
FluTextBox{
|
||||||
|
|
||||||
property var items:[]
|
property var items:[]
|
||||||
property int fontStyle: FluText.Body
|
|
||||||
property string emptyText: "没有找到结果"
|
property string emptyText: "没有找到结果"
|
||||||
property int pixelSize : FluTheme.textSize
|
|
||||||
property int iconSource: 0
|
|
||||||
property bool disabled: false
|
|
||||||
signal itemClicked(var data)
|
signal itemClicked(var data)
|
||||||
signal handleClicked
|
signal handleClicked
|
||||||
property color normalColor: FluTheme.dark ? Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
|
|
||||||
property color disableColor: FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
|
|
||||||
property color placeholderNormalColor: FluTheme.dark ? Qt.rgba(210/255,210/255,210/255,1) : Qt.rgba(96/255,96/255,96/255,1)
|
|
||||||
property color placeholderFocusColor: FluTheme.dark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1)
|
|
||||||
property color placeholderDisableColor: FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
|
|
||||||
QtObject{
|
QtObject{
|
||||||
id:d
|
id:d
|
||||||
property bool flagVisible: true
|
property bool flagVisible: true
|
||||||
}
|
}
|
||||||
id:control
|
id:control
|
||||||
width: 300
|
width: 300
|
||||||
enabled: !disabled
|
|
||||||
color: {
|
|
||||||
if(disabled){
|
|
||||||
return disableColor
|
|
||||||
}
|
|
||||||
return normalColor
|
|
||||||
}
|
|
||||||
selectionColor: FluTheme.primaryColor.lightest
|
|
||||||
renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
|
|
||||||
placeholderTextColor: {
|
|
||||||
if(disabled){
|
|
||||||
return placeholderDisableColor
|
|
||||||
}
|
|
||||||
if(focus){
|
|
||||||
return placeholderFocusColor
|
|
||||||
}
|
|
||||||
return placeholderNormalColor
|
|
||||||
}
|
|
||||||
rightPadding: icon_right.visible ? 50 : 30
|
|
||||||
selectByMouse: true
|
|
||||||
Keys.onUpPressed: {
|
|
||||||
list_view.currentIndex = Math.max(list_view.currentIndex-1,0)
|
|
||||||
}
|
|
||||||
Keys.onDownPressed: {
|
|
||||||
list_view.currentIndex = Math.min(list_view.currentIndex+1,list_view.count-1)
|
|
||||||
}
|
|
||||||
Keys.onEnterPressed:handleClicked()
|
|
||||||
Keys.onReturnPressed:handleClicked()
|
|
||||||
font.bold: {
|
|
||||||
switch (fontStyle) {
|
|
||||||
case FluText.Display:
|
|
||||||
return true
|
|
||||||
case FluText.TitleLarge:
|
|
||||||
return true
|
|
||||||
case FluText.Title:
|
|
||||||
return true
|
|
||||||
case FluText.SubTitle:
|
|
||||||
return true
|
|
||||||
case FluText.BodyStrong:
|
|
||||||
return true
|
|
||||||
case FluText.Body:
|
|
||||||
return false
|
|
||||||
case FluText.Caption:
|
|
||||||
return false
|
|
||||||
default:
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
font.pixelSize: {
|
|
||||||
switch (fontStyle) {
|
|
||||||
case FluText.Display:
|
|
||||||
return text.pixelSize * 4.857
|
|
||||||
case FluText.TitleLarge:
|
|
||||||
return text.pixelSize * 2.857
|
|
||||||
case FluText.Title:
|
|
||||||
return text.pixelSize * 2
|
|
||||||
case FluText.SubTitle:
|
|
||||||
return text.pixelSize * 1.428
|
|
||||||
case FluText.Body:
|
|
||||||
return text.pixelSize * 1.0
|
|
||||||
case FluText.BodyStrong:
|
|
||||||
return text.pixelSize * 1.0
|
|
||||||
case FluText.Caption:
|
|
||||||
return text.pixelSize * 0.857
|
|
||||||
default:
|
|
||||||
return text.pixelSize * 1.0
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
FluIconButton{
|
|
||||||
iconSource:FluentIcons.ChromeClose
|
|
||||||
iconSize: 10
|
|
||||||
width: 20
|
|
||||||
height: 20
|
|
||||||
opacity: 0.5
|
|
||||||
visible: control.text !== ""
|
|
||||||
anchors{
|
|
||||||
verticalCenter: parent.verticalCenter
|
|
||||||
right: parent.right
|
|
||||||
rightMargin: icon_right.visible ? 25 : 5
|
|
||||||
}
|
|
||||||
onClicked:{
|
|
||||||
control.text = ""
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
background: FluTextBoxBackground{
|
|
||||||
inputItem: control
|
|
||||||
FluIcon{
|
|
||||||
id:icon_right
|
|
||||||
iconSource: control.iconSource
|
|
||||||
iconSize: 15
|
|
||||||
opacity: 0.5
|
|
||||||
visible: control.iconSource != 0
|
|
||||||
anchors{
|
|
||||||
verticalCenter: parent.verticalCenter
|
|
||||||
right: parent.right
|
|
||||||
rightMargin: 5
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Component.onCompleted: {
|
Component.onCompleted: {
|
||||||
loadData()
|
loadData()
|
||||||
}
|
}
|
||||||
|
|
||||||
Popup{
|
Popup{
|
||||||
id:control_popup
|
id:control_popup
|
||||||
y:control.height
|
y:control.height
|
||||||
@ -269,4 +156,3 @@ TextField{
|
|||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
import QtQuick.Controls
|
import QtQuick.Controls
|
||||||
import FluentUI
|
import FluentUI
|
||||||
|
|
||||||
Button {
|
FluControl {
|
||||||
|
|
||||||
property bool disabled: false
|
property bool disabled: false
|
||||||
property color normalColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)
|
property color normalColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)
|
||||||
@ -43,11 +43,17 @@ Button {
|
|||||||
if(disabled){
|
if(disabled){
|
||||||
return Qt.rgba(131/255,131/255,131/255,1)
|
return Qt.rgba(131/255,131/255,131/255,1)
|
||||||
}
|
}
|
||||||
|
if(pressed){
|
||||||
|
return Qt.rgba(162/255,162/255,162/255,1)
|
||||||
|
}
|
||||||
return Qt.rgba(1,1,1,1)
|
return Qt.rgba(1,1,1,1)
|
||||||
}else{
|
}else{
|
||||||
if(disabled){
|
if(disabled){
|
||||||
return Qt.rgba(160/255,160/255,160/255,1)
|
return Qt.rgba(160/255,160/255,160/255,1)
|
||||||
}
|
}
|
||||||
|
if(pressed){
|
||||||
|
return Qt.rgba(96/255,96/255,96/255,1)
|
||||||
|
}
|
||||||
return Qt.rgba(0,0,0,1)
|
return Qt.rgba(0,0,0,1)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -3,7 +3,7 @@ import QtQuick.Controls
|
|||||||
import QtQuick.Layouts
|
import QtQuick.Layouts
|
||||||
import FluentUI
|
import FluentUI
|
||||||
|
|
||||||
Button {
|
FluControl {
|
||||||
|
|
||||||
property bool selected: false
|
property bool selected: false
|
||||||
property var clickFunc
|
property var clickFunc
|
||||||
@ -12,10 +12,13 @@ Button {
|
|||||||
property color borderSelectedColor: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
|
property color borderSelectedColor: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
|
||||||
property color borderHoverColor: FluTheme.dark ? Qt.rgba(167/255,167/255,167/255,1) : Qt.rgba(135/255,135/255,135/255,1)
|
property color borderHoverColor: FluTheme.dark ? Qt.rgba(167/255,167/255,167/255,1) : Qt.rgba(135/255,135/255,135/255,1)
|
||||||
property color borderDisableColor: FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
|
property color borderDisableColor: FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
|
||||||
|
property color borderPressedColor: FluTheme.dark ? Qt.rgba(90/255,90/255,90/255,1) : Qt.rgba(191/255,191/255,191/255,1)
|
||||||
|
|
||||||
property color normalColor: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(247/255,247/255,247/255,1)
|
property color normalColor: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(247/255,247/255,247/255,1)
|
||||||
property color selectedColor: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
|
property color selectedColor: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
|
||||||
property color hoverColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(244/255,244/255,244/255,1)
|
property color hoverColor: FluTheme.dark ? Qt.rgba(72/255,72/255,72/255,1) : Qt.rgba(236/255,236/255,236/255,1)
|
||||||
property color selectedHoverColor: FluTheme.dark ? Qt.darker(selectedColor,1.1) : Qt.lighter(selectedColor,1.1)
|
property color selectedHoverColor: FluTheme.dark ? Qt.darker(selectedColor,1.15) : Qt.lighter(selectedColor,1.15)
|
||||||
|
property color selectedPreesedColor: FluTheme.dark ? Qt.darker(selectedColor,1.3) : Qt.lighter(selectedColor,1.3)
|
||||||
property color selectedDisableColor: FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
|
property color selectedDisableColor: FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
|
||||||
property color disableColor: FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(253/255,253/255,253/255,1)
|
property color disableColor: FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(253/255,253/255,253/255,1)
|
||||||
|
|
||||||
@ -52,6 +55,9 @@ Button {
|
|||||||
if(selected){
|
if(selected){
|
||||||
return borderSelectedColor
|
return borderSelectedColor
|
||||||
}
|
}
|
||||||
|
if(pressed){
|
||||||
|
return borderPressedColor
|
||||||
|
}
|
||||||
if(hovered){
|
if(hovered){
|
||||||
return borderHoverColor
|
return borderHoverColor
|
||||||
}
|
}
|
||||||
@ -63,6 +69,9 @@ Button {
|
|||||||
if(disabled){
|
if(disabled){
|
||||||
return selectedDisableColor
|
return selectedDisableColor
|
||||||
}
|
}
|
||||||
|
if(pressed){
|
||||||
|
return selectedPreesedColor
|
||||||
|
}
|
||||||
if(hovered){
|
if(hovered){
|
||||||
return selectedHoverColor
|
return selectedHoverColor
|
||||||
}
|
}
|
||||||
|
@ -4,8 +4,7 @@ import QtQuick.Layouts
|
|||||||
import QtQuick.Window
|
import QtQuick.Window
|
||||||
import FluentUI
|
import FluentUI
|
||||||
|
|
||||||
|
FluControl{
|
||||||
Button{
|
|
||||||
id:control
|
id:control
|
||||||
width: 36
|
width: 36
|
||||||
height: 36
|
height: 36
|
||||||
|
13
src/controls/FluControl.qml
Normal file
13
src/controls/FluControl.qml
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import QtQuick
|
||||||
|
import QtQuick.Controls
|
||||||
|
import QtQuick.Controls.impl
|
||||||
|
import QtQuick.Templates as T
|
||||||
|
import FluentUI
|
||||||
|
|
||||||
|
T.Button {
|
||||||
|
id: control
|
||||||
|
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
|
||||||
|
implicitContentWidth + leftPadding + rightPadding)
|
||||||
|
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
|
||||||
|
implicitContentHeight + topPadding + bottomPadding)
|
||||||
|
}
|
@ -3,7 +3,7 @@ import QtQuick.Controls
|
|||||||
import QtQuick.Window
|
import QtQuick.Window
|
||||||
import FluentUI
|
import FluentUI
|
||||||
|
|
||||||
Button {
|
FluControl {
|
||||||
|
|
||||||
property bool disabled: false
|
property bool disabled: false
|
||||||
property color normalColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)
|
property color normalColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)
|
||||||
@ -58,11 +58,17 @@ Button {
|
|||||||
if(disabled){
|
if(disabled){
|
||||||
return Qt.rgba(131/255,131/255,131/255,1)
|
return Qt.rgba(131/255,131/255,131/255,1)
|
||||||
}
|
}
|
||||||
|
if(pressed){
|
||||||
|
return Qt.rgba(162/255,162/255,162/255,1)
|
||||||
|
}
|
||||||
return Qt.rgba(1,1,1,1)
|
return Qt.rgba(1,1,1,1)
|
||||||
}else{
|
}else{
|
||||||
if(disabled){
|
if(disabled){
|
||||||
return Qt.rgba(160/255,160/255,160/255,1)
|
return Qt.rgba(160/255,160/255,160/255,1)
|
||||||
}
|
}
|
||||||
|
if(pressed){
|
||||||
|
return Qt.rgba(96/255,96/255,96/255,1)
|
||||||
|
}
|
||||||
return Qt.rgba(0,0,0,1)
|
return Qt.rgba(0,0,0,1)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -2,12 +2,13 @@
|
|||||||
import QtQuick.Controls
|
import QtQuick.Controls
|
||||||
import FluentUI
|
import FluentUI
|
||||||
|
|
||||||
Button {
|
FluControl {
|
||||||
|
|
||||||
property bool disabled: false
|
property bool disabled: false
|
||||||
property color normalColor: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
|
property color normalColor: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
|
||||||
property color hoverColor: FluTheme.dark ? Qt.darker(normalColor,1.1) : Qt.lighter(normalColor,1.1)
|
property color hoverColor: FluTheme.dark ? Qt.darker(normalColor,1.1) : Qt.lighter(normalColor,1.1)
|
||||||
property color disableColor: FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
|
property color disableColor: FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
|
||||||
|
property color pressedColor: FluTheme.dark ? Qt.darker(normalColor,1.2) : Qt.lighter(normalColor,1.2)
|
||||||
|
|
||||||
id: control
|
id: control
|
||||||
enabled: !disabled
|
enabled: !disabled
|
||||||
@ -27,6 +28,9 @@ Button {
|
|||||||
if(disabled){
|
if(disabled){
|
||||||
return disableColor
|
return disableColor
|
||||||
}
|
}
|
||||||
|
if(pressed){
|
||||||
|
return pressedColor
|
||||||
|
}
|
||||||
return hovered ? hoverColor :normalColor
|
return hovered ? hoverColor :normalColor
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
116
src/controls/FluFlipView.qml
Normal file
116
src/controls/FluFlipView.qml
Normal file
@ -0,0 +1,116 @@
|
|||||||
|
import QtQuick
|
||||||
|
import QtQuick.Controls
|
||||||
|
import FluentUI
|
||||||
|
|
||||||
|
Item{
|
||||||
|
|
||||||
|
property bool vertical: false
|
||||||
|
default property alias content : swipe.contentData
|
||||||
|
property alias currentIndex: swipe.currentIndex
|
||||||
|
|
||||||
|
id:control
|
||||||
|
width: 400
|
||||||
|
height: 300
|
||||||
|
implicitWidth: width
|
||||||
|
implicitHeight: height
|
||||||
|
|
||||||
|
QtObject{
|
||||||
|
id:d
|
||||||
|
property bool flag: true
|
||||||
|
}
|
||||||
|
|
||||||
|
MouseArea{
|
||||||
|
anchors.fill: parent
|
||||||
|
preventStealing: true
|
||||||
|
onWheel:
|
||||||
|
(wheel)=>{
|
||||||
|
if(!d.flag)
|
||||||
|
return
|
||||||
|
if (wheel.angleDelta.y > 0){
|
||||||
|
btn_start.clicked()
|
||||||
|
}else{
|
||||||
|
btn_end.clicked()
|
||||||
|
}
|
||||||
|
d.flag = false
|
||||||
|
timer.restart()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Timer{
|
||||||
|
id:timer
|
||||||
|
interval: 250
|
||||||
|
onTriggered: {
|
||||||
|
d.flag = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
SwipeView {
|
||||||
|
id:swipe
|
||||||
|
clip: true
|
||||||
|
interactive: false
|
||||||
|
orientation:control.vertical ? Qt.Vertical : Qt.Horizontal
|
||||||
|
anchors.fill: parent
|
||||||
|
}
|
||||||
|
|
||||||
|
FluControl{
|
||||||
|
id:btn_start
|
||||||
|
height: vertical ? 20 : 40
|
||||||
|
width: vertical ? 40 : 20
|
||||||
|
anchors{
|
||||||
|
left: vertical ? undefined : parent.left
|
||||||
|
leftMargin: vertical ? undefined : 2
|
||||||
|
verticalCenter: vertical ? undefined : parent.verticalCenter
|
||||||
|
horizontalCenter: !vertical ? undefined : parent.horizontalCenter
|
||||||
|
top: !vertical ? undefined :parent.top
|
||||||
|
topMargin: !vertical ? undefined :2
|
||||||
|
}
|
||||||
|
background: Rectangle{
|
||||||
|
radius: 4
|
||||||
|
color:FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,0.97) : Qt.rgba(237/255,237/255,237/255,0.97)
|
||||||
|
}
|
||||||
|
contentItem:FluIcon{
|
||||||
|
iconSource: vertical ? FluentIcons.CaretUpSolid8 : FluentIcons.CaretLeftSolid8
|
||||||
|
width: 10
|
||||||
|
height: 10
|
||||||
|
iconSize: 10
|
||||||
|
iconColor: btn_start.hovered ? FluColors.Grey220 : FluColors.Grey120
|
||||||
|
anchors.centerIn: parent
|
||||||
|
}
|
||||||
|
visible: swipe.currentIndex !==0
|
||||||
|
onClicked: {
|
||||||
|
swipe.currentIndex = Math.max(swipe.currentIndex - 1, 0)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
FluControl{
|
||||||
|
id:btn_end
|
||||||
|
height: vertical ? 20 : 40
|
||||||
|
width: vertical ? 40 : 20
|
||||||
|
anchors{
|
||||||
|
right: vertical ? undefined : parent.right
|
||||||
|
rightMargin: vertical ? undefined : 2
|
||||||
|
verticalCenter: vertical ? undefined : parent.verticalCenter
|
||||||
|
horizontalCenter: !vertical ? undefined : parent.horizontalCenter
|
||||||
|
bottom: !vertical ? undefined :parent.bottom
|
||||||
|
bottomMargin: !vertical ? undefined :2
|
||||||
|
}
|
||||||
|
background: Rectangle{
|
||||||
|
radius: 4
|
||||||
|
color:FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,0.97) : Qt.rgba(237/255,237/255,237/255,0.97)
|
||||||
|
}
|
||||||
|
visible: swipe.currentIndex !== swipe.count - 1
|
||||||
|
contentItem:FluIcon{
|
||||||
|
iconSource: vertical ? FluentIcons.CaretDownSolid8 : FluentIcons.CaretRightSolid8
|
||||||
|
width: 10
|
||||||
|
height: 10
|
||||||
|
iconSize: 10
|
||||||
|
iconColor: btn_end.hovered ? FluColors.Grey220 : FluColors.Grey120
|
||||||
|
anchors.centerIn: parent
|
||||||
|
}
|
||||||
|
onClicked: {
|
||||||
|
swipe.currentIndex = Math.min(swipe.currentIndex + 1,swipe.count-1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -2,22 +2,26 @@
|
|||||||
import QtQuick.Controls
|
import QtQuick.Controls
|
||||||
import FluentUI
|
import FluentUI
|
||||||
|
|
||||||
Button {
|
FluControl {
|
||||||
|
|
||||||
property int iconSize: 20
|
property int iconSize: 20
|
||||||
property int iconSource
|
property int iconSource
|
||||||
property bool disabled: false
|
property bool disabled: false
|
||||||
property int radius:4
|
property int radius:4
|
||||||
property color hoverColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(0,0,0,0.03)
|
property color hoverColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(0,0,0,0.03)
|
||||||
|
property color pressedColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(0,0,0,0.06)
|
||||||
property color normalColor: FluTheme.dark ? Qt.rgba(0,0,0,0) : Qt.rgba(0,0,0,0)
|
property color normalColor: FluTheme.dark ? Qt.rgba(0,0,0,0) : Qt.rgba(0,0,0,0)
|
||||||
property color disableColor: FluTheme.dark ? Qt.rgba(0,0,0,0) : Qt.rgba(0,0,0,0)
|
property color disableColor: FluTheme.dark ? Qt.rgba(0,0,0,0) : Qt.rgba(0,0,0,0)
|
||||||
property color color: {
|
property color color: {
|
||||||
if(disabled){
|
if(disabled){
|
||||||
return disableColor
|
return disableColor
|
||||||
}
|
}
|
||||||
|
if(pressed){
|
||||||
|
return pressedColor
|
||||||
|
}
|
||||||
return hovered ? hoverColor : normalColor
|
return hovered ? hoverColor : normalColor
|
||||||
}
|
}
|
||||||
property color textColor: {
|
property color iconColor: {
|
||||||
if(FluTheme.dark){
|
if(FluTheme.dark){
|
||||||
if(disabled){
|
if(disabled){
|
||||||
return Qt.rgba(130/255,130/255,130/255,1)
|
return Qt.rgba(130/255,130/255,130/255,1)
|
||||||
@ -57,7 +61,7 @@ Button {
|
|||||||
horizontalAlignment: Text.AlignHCenter
|
horizontalAlignment: Text.AlignHCenter
|
||||||
verticalAlignment: Text.AlignVCenter
|
verticalAlignment: Text.AlignVCenter
|
||||||
anchors.centerIn: parent
|
anchors.centerIn: parent
|
||||||
color:control.textColor
|
color:control.iconColor
|
||||||
text: (String.fromCharCode(iconSource).toString(16));
|
text: (String.fromCharCode(iconSource).toString(16));
|
||||||
}
|
}
|
||||||
FluTooltip{
|
FluTooltip{
|
||||||
|
@ -121,7 +121,6 @@ Rectangle {
|
|||||||
text: formatDuration(slider.value*mediaplayer.duration/slider.maxValue)
|
text: formatDuration(slider.value*mediaplayer.duration/slider.maxValue)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
FluText{
|
FluText{
|
||||||
id:end_time
|
id:end_time
|
||||||
anchors{
|
anchors{
|
||||||
@ -132,7 +131,6 @@ Rectangle {
|
|||||||
text: formatDuration(mediaplayer.duration)
|
text: formatDuration(mediaplayer.duration)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
Row{
|
Row{
|
||||||
spacing: 10
|
spacing: 10
|
||||||
anchors{
|
anchors{
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
import QtQuick.Controls
|
import QtQuick.Controls
|
||||||
import FluentUI
|
import FluentUI
|
||||||
|
|
||||||
TextArea{
|
FluTextArea{
|
||||||
|
|
||||||
property int fontStyle: FluText.Body
|
property int fontStyle: FluText.Body
|
||||||
property int pixelSize : FluTheme.textSize
|
property int pixelSize : FluTheme.textSize
|
||||||
|
@ -150,20 +150,20 @@ Item {
|
|||||||
}
|
}
|
||||||
color: {
|
color: {
|
||||||
if(FluTheme.dark){
|
if(FluTheme.dark){
|
||||||
if(item_mouse.containsMouse){
|
|
||||||
return Qt.rgba(1,1,1,0.03)
|
|
||||||
}
|
|
||||||
if((nav_list.currentIndex === position)&&type===0){
|
if((nav_list.currentIndex === position)&&type===0){
|
||||||
return Qt.rgba(1,1,1,0.06)
|
return Qt.rgba(1,1,1,0.06)
|
||||||
}
|
}
|
||||||
|
if(item_mouse.containsMouse){
|
||||||
|
return Qt.rgba(1,1,1,0.03)
|
||||||
|
}
|
||||||
return Qt.rgba(0,0,0,0)
|
return Qt.rgba(0,0,0,0)
|
||||||
}else{
|
}else{
|
||||||
if(item_mouse.containsMouse){
|
|
||||||
return Qt.rgba(0,0,0,0.03)
|
|
||||||
}
|
|
||||||
if(nav_list.currentIndex === position&&type===0){
|
if(nav_list.currentIndex === position&&type===0){
|
||||||
return Qt.rgba(0,0,0,0.06)
|
return Qt.rgba(0,0,0,0.06)
|
||||||
}
|
}
|
||||||
|
if(item_mouse.containsMouse){
|
||||||
|
return Qt.rgba(0,0,0,0.03)
|
||||||
|
}
|
||||||
return Qt.rgba(0,0,0,0)
|
return Qt.rgba(0,0,0,0)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -193,6 +193,12 @@ Item {
|
|||||||
verticalCenter: parent.verticalCenter
|
verticalCenter: parent.verticalCenter
|
||||||
left:item_icon.right
|
left:item_icon.right
|
||||||
}
|
}
|
||||||
|
color:{
|
||||||
|
if(item_mouse.pressed){
|
||||||
|
return FluTheme.dark ? FluColors.Grey80 : FluColors.Grey120
|
||||||
|
}
|
||||||
|
return FluTheme.dark ? FluColors.White : FluColors.Grey220
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -227,23 +233,16 @@ Item {
|
|||||||
leftMargin: 6
|
leftMargin: 6
|
||||||
rightMargin: 6
|
rightMargin: 6
|
||||||
}
|
}
|
||||||
Rectangle{
|
|
||||||
width: 3
|
|
||||||
height: 18
|
|
||||||
radius: 1.5
|
|
||||||
color: FluTheme.primaryColor.dark
|
|
||||||
visible: nav_list.currentIndex === position && type===0
|
|
||||||
anchors{
|
|
||||||
verticalCenter: parent.verticalCenter
|
|
||||||
}
|
|
||||||
}
|
|
||||||
MouseArea{
|
MouseArea{
|
||||||
id:item_mouse
|
id:item_mouse
|
||||||
hoverEnabled: true
|
hoverEnabled: true
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
onClicked: {
|
onClicked: {
|
||||||
if(type===0){
|
if(type===0){
|
||||||
model.repTap()
|
if(model.tapFunc){
|
||||||
|
model.tapFunc()
|
||||||
|
return
|
||||||
|
}
|
||||||
if(nav_list.currentIndex !== position){
|
if(nav_list.currentIndex !== position){
|
||||||
nav_list.currentIndex = position
|
nav_list.currentIndex = position
|
||||||
model.tap()
|
model.tap()
|
||||||
@ -256,20 +255,20 @@ Item {
|
|||||||
}
|
}
|
||||||
color: {
|
color: {
|
||||||
if(FluTheme.dark){
|
if(FluTheme.dark){
|
||||||
if(item_mouse.containsMouse){
|
|
||||||
return Qt.rgba(1,1,1,0.03)
|
|
||||||
}
|
|
||||||
if((nav_list.currentIndex === position)&&type===0){
|
if((nav_list.currentIndex === position)&&type===0){
|
||||||
return Qt.rgba(1,1,1,0.06)
|
return Qt.rgba(1,1,1,0.06)
|
||||||
}
|
}
|
||||||
|
if(item_mouse.containsMouse){
|
||||||
|
return Qt.rgba(1,1,1,0.03)
|
||||||
|
}
|
||||||
return Qt.rgba(0,0,0,0)
|
return Qt.rgba(0,0,0,0)
|
||||||
}else{
|
}else{
|
||||||
if(item_mouse.containsMouse){
|
|
||||||
return Qt.rgba(0,0,0,0.03)
|
|
||||||
}
|
|
||||||
if(nav_list.currentIndex === position&&type===0){
|
if(nav_list.currentIndex === position&&type===0){
|
||||||
return Qt.rgba(0,0,0,0.06)
|
return Qt.rgba(0,0,0,0.06)
|
||||||
}
|
}
|
||||||
|
if(item_mouse.containsMouse){
|
||||||
|
return Qt.rgba(0,0,0,0.03)
|
||||||
|
}
|
||||||
return Qt.rgba(0,0,0,0)
|
return Qt.rgba(0,0,0,0)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -295,6 +294,12 @@ Item {
|
|||||||
FluText{
|
FluText{
|
||||||
id:item_title
|
id:item_title
|
||||||
text:model.title
|
text:model.title
|
||||||
|
color:{
|
||||||
|
if(item_mouse.pressed){
|
||||||
|
return FluTheme.dark ? FluColors.Grey80 : FluColors.Grey120
|
||||||
|
}
|
||||||
|
return FluTheme.dark ? FluColors.White : FluColors.Grey220
|
||||||
|
}
|
||||||
anchors{
|
anchors{
|
||||||
verticalCenter: parent.verticalCenter
|
verticalCenter: parent.verticalCenter
|
||||||
left:item_icon.right
|
left:item_icon.right
|
||||||
@ -468,8 +473,21 @@ Item {
|
|||||||
stackIndex.push(currentIndex)
|
stackIndex.push(currentIndex)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
highlight: Item{
|
||||||
|
clip: true
|
||||||
|
Rectangle{
|
||||||
|
height: 18
|
||||||
|
radius: 1.5
|
||||||
|
color: FluTheme.primaryColor.dark
|
||||||
|
width: 3
|
||||||
|
anchors{
|
||||||
|
verticalCenter: parent.verticalCenter
|
||||||
|
left: parent.left
|
||||||
|
leftMargin: 6
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
ScrollBar.vertical: FluScrollBar {}
|
ScrollBar.vertical: FluScrollBar {}
|
||||||
|
|
||||||
model:handleItems()
|
model:handleItems()
|
||||||
delegate: Loader{
|
delegate: Loader{
|
||||||
property var model: modelData
|
property var model: modelData
|
||||||
|
110
src/controls/FluPagination.qml
Normal file
110
src/controls/FluPagination.qml
Normal file
@ -0,0 +1,110 @@
|
|||||||
|
import QtQuick
|
||||||
|
import FluentUI
|
||||||
|
import QtQuick.Layouts
|
||||||
|
|
||||||
|
Item {
|
||||||
|
id: control
|
||||||
|
|
||||||
|
|
||||||
|
signal requestPage(int page,int count)
|
||||||
|
property int pageCurrent: 0
|
||||||
|
property int itemCount: 0
|
||||||
|
property int pageCount: itemCount>0?Math.ceil(itemCount/__itemPerPage):0
|
||||||
|
property int __itemPerPage: 10
|
||||||
|
property int pageButtonCount: 5
|
||||||
|
property int __pageButtonHalf: Math.floor(pageButtonCount/2)+1
|
||||||
|
|
||||||
|
|
||||||
|
implicitHeight: 40
|
||||||
|
implicitWidth: content.width
|
||||||
|
|
||||||
|
Row{
|
||||||
|
id: content
|
||||||
|
height: control.height
|
||||||
|
spacing: 25
|
||||||
|
padding: 10
|
||||||
|
|
||||||
|
|
||||||
|
FluToggleButton{
|
||||||
|
visible: control.pageCount>1
|
||||||
|
disabled: control.pageCurrent<=1
|
||||||
|
text:"<上一页"
|
||||||
|
onClicked: {
|
||||||
|
control.calcNewPage(control.pageCurrent-1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Row{
|
||||||
|
spacing: 5
|
||||||
|
FluToggleButton{
|
||||||
|
property int pageNumber:1
|
||||||
|
visible: control.pageCount>0
|
||||||
|
enabled: control.pageCurrent>1
|
||||||
|
selected: pageNumber === control.pageCurrent
|
||||||
|
text:String(pageNumber)
|
||||||
|
onClicked: {
|
||||||
|
control.calcNewPage(pageNumber);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
FluText{
|
||||||
|
visible: (control.pageCount>control.pageButtonCount&&
|
||||||
|
control.pageCurrent>control.__pageButtonHalf)
|
||||||
|
text: "..."
|
||||||
|
}
|
||||||
|
Repeater{
|
||||||
|
id: button_repeator
|
||||||
|
model: (control.pageCount<2)?0:(control.pageCount>=control.pageButtonCount)?(control.pageButtonCount-2):(control.pageCount-2)
|
||||||
|
delegate:FluToggleButton{
|
||||||
|
property int pageNumber: {
|
||||||
|
return (control.pageCurrent<=control.__pageButtonHalf)
|
||||||
|
?(2+index)
|
||||||
|
:(control.pageCount-control.pageCurrent<=control.pageButtonCount-control.__pageButtonHalf)
|
||||||
|
?(control.pageCount-button_repeator.count+index)
|
||||||
|
:(control.pageCurrent+2+index-control.__pageButtonHalf)
|
||||||
|
}
|
||||||
|
text:String(pageNumber)
|
||||||
|
selected: pageNumber === control.pageCurrent
|
||||||
|
onClicked: {
|
||||||
|
control.calcNewPage(pageNumber);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
FluText{
|
||||||
|
visible: (control.pageCount>control.pageButtonCount&&
|
||||||
|
control.pageCount-control.pageCurrent>control.pageButtonCount-control.__pageButtonHalf)
|
||||||
|
text: "..."
|
||||||
|
}
|
||||||
|
FluToggleButton{
|
||||||
|
property int pageNumber:control.pageCount
|
||||||
|
visible: control.pageCount>0
|
||||||
|
enabled: control.pageCurrent>1
|
||||||
|
selected: pageNumber === control.pageCurrent
|
||||||
|
text:String(pageNumber)
|
||||||
|
onClicked: {
|
||||||
|
control.calcNewPage(pageNumber);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
FluToggleButton{
|
||||||
|
visible: control.pageCount>1
|
||||||
|
disabled: control.pageCurrent>=control.pageCount
|
||||||
|
text:"下一页>"
|
||||||
|
onClicked: {
|
||||||
|
control.calcNewPage(control.pageCurrent+1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function calcNewPage(page)
|
||||||
|
{
|
||||||
|
if(!page)
|
||||||
|
return
|
||||||
|
let page_num=Number(page)
|
||||||
|
if(page_num<1||page_num>control.pageCount||page_num===control.pageCurrent)
|
||||||
|
return
|
||||||
|
control.pageCurrent=page_num
|
||||||
|
control.requestPage(page_num,control.__itemPerPage)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
@ -5,6 +5,7 @@ QtObject {
|
|||||||
readonly property string key : FluApp.uuid()
|
readonly property string key : FluApp.uuid()
|
||||||
readonly property int flag : 0
|
readonly property int flag : 0
|
||||||
property string title
|
property string title
|
||||||
|
property int order : 0
|
||||||
property int icon
|
property int icon
|
||||||
property bool recentlyAdded: false
|
property bool recentlyAdded: false
|
||||||
property bool recentlyUpdated: false
|
property bool recentlyUpdated: false
|
||||||
@ -13,5 +14,5 @@ QtObject {
|
|||||||
property var parent
|
property var parent
|
||||||
property int idx
|
property int idx
|
||||||
signal tap
|
signal tap
|
||||||
signal repTap
|
property var tapFunc
|
||||||
}
|
}
|
||||||
|
@ -10,5 +10,4 @@ FluObject {
|
|||||||
property var parent
|
property var parent
|
||||||
property int idx
|
property int idx
|
||||||
signal tap
|
signal tap
|
||||||
signal repTap
|
|
||||||
}
|
}
|
||||||
|
104
src/controls/FluPivot.qml
Normal file
104
src/controls/FluPivot.qml
Normal file
@ -0,0 +1,104 @@
|
|||||||
|
import QtQuick
|
||||||
|
import QtQuick.Controls
|
||||||
|
import FluentUI
|
||||||
|
|
||||||
|
Item {
|
||||||
|
|
||||||
|
|
||||||
|
id:control
|
||||||
|
default property alias content: d.children
|
||||||
|
property color normalColor: FluTheme.dark ? FluColors.Grey120 : FluColors.Grey120
|
||||||
|
property color hoverColor: FluTheme.dark ? FluColors.Grey10 : FluColors.Black
|
||||||
|
|
||||||
|
width: 400
|
||||||
|
height: 300
|
||||||
|
implicitHeight: height
|
||||||
|
implicitWidth: width
|
||||||
|
|
||||||
|
MouseArea{
|
||||||
|
anchors.fill: parent
|
||||||
|
preventStealing: true
|
||||||
|
}
|
||||||
|
|
||||||
|
FluObject{
|
||||||
|
id:d
|
||||||
|
}
|
||||||
|
|
||||||
|
ListView{
|
||||||
|
id:nav_list
|
||||||
|
height: 40
|
||||||
|
width: control.width
|
||||||
|
model:d.children
|
||||||
|
clip: true
|
||||||
|
spacing: 20
|
||||||
|
interactive: false
|
||||||
|
orientation:ListView.Horizontal
|
||||||
|
highlight: Item{
|
||||||
|
clip: true
|
||||||
|
Rectangle{
|
||||||
|
height: 3
|
||||||
|
radius: 1.5
|
||||||
|
color: FluTheme.primaryColor.dark
|
||||||
|
width: nav_list.currentItem ? nav_list.currentItem.width : 0
|
||||||
|
y:37
|
||||||
|
Behavior on width {
|
||||||
|
NumberAnimation{
|
||||||
|
duration: 150
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
delegate: Button{
|
||||||
|
id:item_button
|
||||||
|
width: item_title.width
|
||||||
|
height: nav_list.height
|
||||||
|
background:Item{
|
||||||
|
}
|
||||||
|
contentItem: Item{
|
||||||
|
FluText {
|
||||||
|
id:item_title
|
||||||
|
fontStyle: FluText.Title
|
||||||
|
font.bold: false
|
||||||
|
text: modelData.title
|
||||||
|
anchors.centerIn: parent
|
||||||
|
color: {
|
||||||
|
if(item_button.hovered)
|
||||||
|
return hoverColor
|
||||||
|
return normalColor
|
||||||
|
}
|
||||||
|
}
|
||||||
|
transitions: Transition {
|
||||||
|
NumberAnimation{
|
||||||
|
duration: 400;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
onClicked: {
|
||||||
|
nav_list.currentIndex = index
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Item{
|
||||||
|
id:container
|
||||||
|
anchors{
|
||||||
|
top: nav_list.bottom
|
||||||
|
topMargin: 10
|
||||||
|
left: parent.left
|
||||||
|
right: parent.right
|
||||||
|
bottom: parent.bottom
|
||||||
|
}
|
||||||
|
|
||||||
|
Repeater{
|
||||||
|
model:d.children
|
||||||
|
Loader{
|
||||||
|
property var argument: modelData.argument
|
||||||
|
anchors.fill: parent
|
||||||
|
sourceComponent: modelData.contentItem
|
||||||
|
visible: nav_list.currentIndex === index
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
8
src/controls/FluPivotItem.qml
Normal file
8
src/controls/FluPivotItem.qml
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
import QtQuick
|
||||||
|
import FluentUI
|
||||||
|
|
||||||
|
QtObject {
|
||||||
|
property string title
|
||||||
|
property Component contentItem
|
||||||
|
property var argument
|
||||||
|
}
|
@ -3,8 +3,7 @@ import QtQuick.Controls
|
|||||||
import QtQuick.Layouts
|
import QtQuick.Layouts
|
||||||
import FluentUI
|
import FluentUI
|
||||||
|
|
||||||
|
FluControl {
|
||||||
Button {
|
|
||||||
|
|
||||||
property bool selected: false
|
property bool selected: false
|
||||||
property bool disabled: false
|
property bool disabled: false
|
||||||
|
@ -1,34 +1,131 @@
|
|||||||
import QtQuick
|
import QtQuick
|
||||||
import QtQuick.Controls
|
import QtQuick.Controls
|
||||||
import QtQuick.Controls.impl 2.15
|
|
||||||
import QtQuick.Templates 2.15 as T
|
|
||||||
import FluentUI
|
import FluentUI
|
||||||
|
|
||||||
T.ScrollBar {
|
ScrollBar {
|
||||||
id: control
|
id: control
|
||||||
|
|
||||||
property color handleNormalColor: Qt.rgba(134/255,134/255,134/255,1)
|
property color handleNormalColor: Qt.rgba(134/255,134/255,134/255,1)
|
||||||
property color handleHoverColor: Qt.lighter(handleNormalColor)
|
property color handleHoverColor: Qt.lighter(handleNormalColor)
|
||||||
property color handlePressColor: Qt.darker(handleNormalColor)
|
property color handlePressColor: Qt.darker(handleNormalColor)
|
||||||
|
property bool expand: false
|
||||||
|
|
||||||
|
|
||||||
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
|
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
|
||||||
implicitContentWidth + leftPadding + rightPadding)
|
implicitContentWidth + leftPadding + rightPadding)
|
||||||
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
|
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
|
||||||
implicitContentHeight + topPadding + bottomPadding)
|
implicitContentHeight + topPadding + bottomPadding)
|
||||||
|
|
||||||
padding: 4
|
visible: control.policy !== ScrollBar.AlwaysOff
|
||||||
visible: control.policy !== T.ScrollBar.AlwaysOff
|
|
||||||
minimumSize: 0.3
|
minimumSize: 0.3
|
||||||
|
topPadding:{
|
||||||
|
if(vertical){
|
||||||
|
if(expand)
|
||||||
|
return 15
|
||||||
|
return 2
|
||||||
|
}else{
|
||||||
|
if(expand){
|
||||||
|
return 2
|
||||||
|
}
|
||||||
|
return 4
|
||||||
|
}
|
||||||
|
}
|
||||||
|
bottomPadding:{
|
||||||
|
if(vertical){
|
||||||
|
if(expand)
|
||||||
|
return 15
|
||||||
|
return 2
|
||||||
|
}else{
|
||||||
|
if(expand){
|
||||||
|
return 2
|
||||||
|
}
|
||||||
|
return 4
|
||||||
|
}
|
||||||
|
}
|
||||||
|
leftPadding:{
|
||||||
|
if(vertical){
|
||||||
|
if(expand){
|
||||||
|
return 2
|
||||||
|
}
|
||||||
|
return 4
|
||||||
|
}else{
|
||||||
|
if(expand)
|
||||||
|
return 15
|
||||||
|
return 2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
rightPadding:{
|
||||||
|
if(vertical){
|
||||||
|
if(expand){
|
||||||
|
return 2
|
||||||
|
}
|
||||||
|
return 4
|
||||||
|
}else{
|
||||||
|
if(expand)
|
||||||
|
return 15
|
||||||
|
return 2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Behavior on topPadding {
|
||||||
|
NumberAnimation{
|
||||||
|
duration: 150
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Behavior on bottomPadding {
|
||||||
|
NumberAnimation{
|
||||||
|
duration: 150
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Behavior on leftPadding {
|
||||||
|
NumberAnimation{
|
||||||
|
duration: 150
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Behavior on rightPadding {
|
||||||
|
NumberAnimation{
|
||||||
|
duration: 150
|
||||||
|
}
|
||||||
|
}
|
||||||
contentItem: Rectangle {
|
contentItem: Rectangle {
|
||||||
implicitWidth: hovered || pressed ? 6 : 2
|
id:item_react
|
||||||
implicitHeight: hovered || pressed ? 6 : 2
|
implicitWidth: expand ? 8 : 2
|
||||||
|
implicitHeight: expand ? 8 : 2
|
||||||
radius: width / 2
|
radius: width / 2
|
||||||
layer.samples: 4
|
layer.samples: 4
|
||||||
layer.enabled: true
|
layer.enabled: true
|
||||||
layer.smooth: true
|
layer.smooth: true
|
||||||
color: control.pressed?handlePressColor:control.hovered?handleHoverColor:handleNormalColor
|
color: control.pressed?handlePressColor:control.hovered?handleHoverColor:handleNormalColor
|
||||||
opacity:(control.policy === T.ScrollBar.AlwaysOn || control.size < 1.0)?1.0:0.0
|
opacity:(control.policy === ScrollBar.AlwaysOn || control.size < 1.0)?1.0:0.0
|
||||||
|
}
|
||||||
|
background: Rectangle{
|
||||||
|
radius: 5
|
||||||
|
color: {
|
||||||
|
if(expand && item_react.opacity){
|
||||||
|
if(FluTheme.dark){
|
||||||
|
return Qt.rgba(0,0,0,1)
|
||||||
|
}
|
||||||
|
return Qt.rgba(1,1,1,1)
|
||||||
|
}
|
||||||
|
return Qt.rgba(0,0,0,0)
|
||||||
|
}
|
||||||
|
MouseArea{
|
||||||
|
id:mouse_item
|
||||||
|
hoverEnabled: true
|
||||||
|
anchors.fill: parent
|
||||||
|
onEntered: {
|
||||||
|
timer.restart()
|
||||||
|
}
|
||||||
|
onExited: {
|
||||||
|
timer.restart()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Timer{
|
||||||
|
id:timer
|
||||||
|
interval: 800
|
||||||
|
onTriggered: {
|
||||||
|
expand = mouse_item.containsMouse || btn_top.hovered || btn_bottom.hovered || btn_left.hovered || btn_right.hovered
|
||||||
|
}
|
||||||
}
|
}
|
||||||
Behavior on implicitWidth {
|
Behavior on implicitWidth {
|
||||||
NumberAnimation{
|
NumberAnimation{
|
||||||
@ -36,4 +133,66 @@ T.ScrollBar {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
FluIconButton{
|
||||||
|
id:btn_top
|
||||||
|
iconSource: FluentIcons.CaretSolidUp
|
||||||
|
anchors.horizontalCenter: parent.horizontalCenter
|
||||||
|
width:10
|
||||||
|
height:10
|
||||||
|
z:100
|
||||||
|
iconColor: hovered ? FluColors.Black : FluColors.Grey120
|
||||||
|
iconSize: 8
|
||||||
|
anchors.top: parent.top
|
||||||
|
anchors.topMargin: 4
|
||||||
|
visible:vertical && expand
|
||||||
|
onClicked:{
|
||||||
|
decrease()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
FluIconButton{
|
||||||
|
id:btn_bottom
|
||||||
|
iconSource: FluentIcons.CaretSolidDown
|
||||||
|
visible:vertical && expand
|
||||||
|
width:10
|
||||||
|
height:10
|
||||||
|
iconSize: 8
|
||||||
|
iconColor: hovered ? FluColors.Black : FluColors.Grey120
|
||||||
|
anchors.horizontalCenter: parent.horizontalCenter
|
||||||
|
anchors.bottom: parent.bottom
|
||||||
|
anchors.bottomMargin: 4
|
||||||
|
onClicked:{
|
||||||
|
increase()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
FluIconButton{
|
||||||
|
id:btn_left
|
||||||
|
iconSource: FluentIcons.CaretSolidLeft
|
||||||
|
visible:!vertical && expand
|
||||||
|
width:10
|
||||||
|
height:10
|
||||||
|
iconSize: 8
|
||||||
|
iconColor: hovered ? FluColors.Black : FluColors.Grey120
|
||||||
|
anchors.leftMargin: 4
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
anchors.left: parent.left
|
||||||
|
onClicked:{
|
||||||
|
decrease()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
FluIconButton{
|
||||||
|
id:btn_right
|
||||||
|
iconSource: FluentIcons.CaretSolidRight
|
||||||
|
visible:!vertical && expand
|
||||||
|
width:10
|
||||||
|
height:10
|
||||||
|
iconSize: 8
|
||||||
|
iconColor: hovered ? FluColors.Black : FluColors.Grey120
|
||||||
|
anchors.rightMargin: 4
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
anchors.right: parent.right
|
||||||
|
onClicked:{
|
||||||
|
increase()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
193
src/controls/FluTableView.qml
Normal file
193
src/controls/FluTableView.qml
Normal file
@ -0,0 +1,193 @@
|
|||||||
|
import QtQuick
|
||||||
|
import QtQuick.Controls
|
||||||
|
import QtQuick.Layouts
|
||||||
|
import FluentUI
|
||||||
|
|
||||||
|
Item {
|
||||||
|
|
||||||
|
id:control
|
||||||
|
property var columns : []
|
||||||
|
property var dataSource : []
|
||||||
|
property int pageCurrent: 1
|
||||||
|
property int itemCount: 1000
|
||||||
|
property int pageCount: 10
|
||||||
|
property int itemHeight: 56
|
||||||
|
signal requestPage(int page,int count)
|
||||||
|
|
||||||
|
implicitHeight: layout_coumns.height + layout_table.height
|
||||||
|
|
||||||
|
MouseArea{
|
||||||
|
anchors.fill: parent
|
||||||
|
preventStealing: true
|
||||||
|
}
|
||||||
|
|
||||||
|
ListModel{
|
||||||
|
id:model_coumns
|
||||||
|
}
|
||||||
|
|
||||||
|
ListModel{
|
||||||
|
id:model_data_source
|
||||||
|
}
|
||||||
|
|
||||||
|
onColumnsChanged: {
|
||||||
|
model_coumns.clear()
|
||||||
|
model_coumns.append(columns)
|
||||||
|
}
|
||||||
|
|
||||||
|
onDataSourceChanged: {
|
||||||
|
model_data_source.clear()
|
||||||
|
model_data_source.append(dataSource)
|
||||||
|
}
|
||||||
|
|
||||||
|
FluRectangle{
|
||||||
|
id:layout_coumns
|
||||||
|
height: control.itemHeight
|
||||||
|
width: parent.width
|
||||||
|
color:FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1)
|
||||||
|
radius: [12,12,0,0]
|
||||||
|
|
||||||
|
Row{
|
||||||
|
id:list_coumns
|
||||||
|
spacing: 0
|
||||||
|
anchors.fill: parent
|
||||||
|
Repeater{
|
||||||
|
model: model_coumns
|
||||||
|
delegate: Item{
|
||||||
|
height: list_coumns.height
|
||||||
|
width: model.width
|
||||||
|
FluText{
|
||||||
|
text:model.title
|
||||||
|
anchors{
|
||||||
|
verticalCenter: parent.verticalCenter
|
||||||
|
left: parent.left
|
||||||
|
leftMargin: 14
|
||||||
|
}
|
||||||
|
fontStyle: FluText.BodyStrong
|
||||||
|
}
|
||||||
|
FluDivider{
|
||||||
|
width: 1
|
||||||
|
height: 40
|
||||||
|
anchors.right: parent.right
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
visible: index !== list_coumns.count-1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Rectangle{
|
||||||
|
anchors.fill: layout_table
|
||||||
|
color: FluTheme.dark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
|
||||||
|
}
|
||||||
|
|
||||||
|
ListView{
|
||||||
|
id:layout_table
|
||||||
|
anchors{
|
||||||
|
top: layout_coumns.bottom
|
||||||
|
left: parent.left
|
||||||
|
right: parent.right
|
||||||
|
}
|
||||||
|
height: contentHeight
|
||||||
|
clip:true
|
||||||
|
footer: Item{
|
||||||
|
height: 50
|
||||||
|
width: layout_table.width
|
||||||
|
FluPagination{
|
||||||
|
id:pagination
|
||||||
|
height: 40
|
||||||
|
pageCurrent: control.pageCurrent
|
||||||
|
itemCount: control.itemCount
|
||||||
|
pageCount: control.pageCount
|
||||||
|
onRequestPage:
|
||||||
|
(page,count)=> {
|
||||||
|
control.requestPage(page,count)
|
||||||
|
}
|
||||||
|
anchors{
|
||||||
|
verticalCenter: parent.verticalCenter
|
||||||
|
right: parent.right
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
model:model_data_source
|
||||||
|
delegate: Item{
|
||||||
|
height: list_coumns.height
|
||||||
|
width: layout_table.width
|
||||||
|
property var model_values : getObjectValues(index)
|
||||||
|
property var itemObject: getObject(index)
|
||||||
|
property var listModel: model
|
||||||
|
Row{
|
||||||
|
spacing: 0
|
||||||
|
anchors.fill: parent
|
||||||
|
Repeater{
|
||||||
|
model: model_values
|
||||||
|
delegate:Item{
|
||||||
|
height: list_coumns.height
|
||||||
|
width: modelData.width
|
||||||
|
Loader{
|
||||||
|
property var model : modelData
|
||||||
|
property var dataModel : listModel
|
||||||
|
property var dataObject : itemObject
|
||||||
|
anchors.fill: parent
|
||||||
|
sourceComponent: {
|
||||||
|
if(model.itemData instanceof Component){
|
||||||
|
return model.itemData
|
||||||
|
}
|
||||||
|
return com_text
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
FluDivider{
|
||||||
|
width: parent.width
|
||||||
|
height: 1
|
||||||
|
anchors.right: parent.right
|
||||||
|
anchors.bottom: parent.bottom
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Component{
|
||||||
|
id:com_text
|
||||||
|
Item{
|
||||||
|
MouseArea{
|
||||||
|
id:item_mouse
|
||||||
|
hoverEnabled: true
|
||||||
|
anchors.fill: parent
|
||||||
|
}
|
||||||
|
FluText{
|
||||||
|
text:String(model.itemData)
|
||||||
|
width: parent.width - 14
|
||||||
|
elide: Text.ElideRight
|
||||||
|
anchors{
|
||||||
|
verticalCenter: parent.verticalCenter
|
||||||
|
left: parent.left
|
||||||
|
leftMargin: 14
|
||||||
|
}
|
||||||
|
FluTooltip{
|
||||||
|
visible: item_mouse.containsMouse
|
||||||
|
text:parent.text
|
||||||
|
delay: 1000
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function getObject(index){
|
||||||
|
return model_data_source.get(index)
|
||||||
|
}
|
||||||
|
|
||||||
|
function getObjectValues(index) {
|
||||||
|
var obj = model_data_source.get(index)
|
||||||
|
if(!obj)
|
||||||
|
return
|
||||||
|
var data = []
|
||||||
|
for(var i=0;i<model_coumns.count;i++){
|
||||||
|
var item = model_coumns.get(i)
|
||||||
|
data.push({itemData:obj[item.dataIndex],width:item.width})
|
||||||
|
}
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
@ -4,7 +4,7 @@ import FluentUI
|
|||||||
Text {
|
Text {
|
||||||
|
|
||||||
property int fontStyle: FluText.Body
|
property int fontStyle: FluText.Body
|
||||||
property color textColor: FluTheme.dark ? "#FFFFFF" : "#1A1A1A"
|
property color textColor: FluTheme.dark ? FluColors.White : FluColors.Grey220
|
||||||
property int pixelSize : FluTheme.textSize
|
property int pixelSize : FluTheme.textSize
|
||||||
|
|
||||||
enum FontStyle {
|
enum FontStyle {
|
||||||
|
38
src/controls/FluTextArea.qml
Normal file
38
src/controls/FluTextArea.qml
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
import QtQuick
|
||||||
|
import QtQuick.Controls.impl
|
||||||
|
import QtQuick.Templates as T
|
||||||
|
|
||||||
|
T.TextArea {
|
||||||
|
id: control
|
||||||
|
|
||||||
|
implicitWidth: Math.max(contentWidth + leftPadding + rightPadding,
|
||||||
|
implicitBackgroundWidth + leftInset + rightInset,
|
||||||
|
placeholder.implicitWidth + leftPadding + rightPadding)
|
||||||
|
implicitHeight: Math.max(contentHeight + topPadding + bottomPadding,
|
||||||
|
implicitBackgroundHeight + topInset + bottomInset,
|
||||||
|
placeholder.implicitHeight + topPadding + bottomPadding)
|
||||||
|
|
||||||
|
padding: 6
|
||||||
|
leftPadding: padding + 4
|
||||||
|
|
||||||
|
color: control.palette.text
|
||||||
|
placeholderTextColor: control.palette.placeholderText
|
||||||
|
selectionColor: control.palette.highlight
|
||||||
|
selectedTextColor: control.palette.highlightedText
|
||||||
|
|
||||||
|
PlaceholderText {
|
||||||
|
id: placeholder
|
||||||
|
x: control.leftPadding
|
||||||
|
y: control.topPadding
|
||||||
|
width: control.width - (control.leftPadding + control.rightPadding)
|
||||||
|
height: control.height - (control.topPadding + control.bottomPadding)
|
||||||
|
|
||||||
|
text: control.placeholderText
|
||||||
|
font: control.font
|
||||||
|
color: control.placeholderTextColor
|
||||||
|
verticalAlignment: control.verticalAlignment
|
||||||
|
visible: !control.length && !control.preeditText && (!control.activeFocus || control.horizontalAlignment !== Qt.AlignHCenter)
|
||||||
|
elide: Text.ElideRight
|
||||||
|
renderType: control.renderType
|
||||||
|
}
|
||||||
|
}
|
@ -2,11 +2,12 @@
|
|||||||
import QtQuick.Controls
|
import QtQuick.Controls
|
||||||
import FluentUI
|
import FluentUI
|
||||||
|
|
||||||
TextField{
|
FluTextFiled{
|
||||||
|
|
||||||
property int fontStyle: FluText.Body
|
property int fontStyle: FluText.Body
|
||||||
property int pixelSize : FluTheme.textSize
|
property int pixelSize : FluTheme.textSize
|
||||||
property bool disabled: false
|
property bool disabled: false
|
||||||
|
property int iconSource: 0
|
||||||
property color normalColor: FluTheme.dark ? Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
|
property color normalColor: FluTheme.dark ? Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
|
||||||
property color disableColor: FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
|
property color disableColor: FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
|
||||||
property color placeholderNormalColor: FluTheme.dark ? Qt.rgba(210/255,210/255,210/255,1) : Qt.rgba(96/255,96/255,96/255,1)
|
property color placeholderNormalColor: FluTheme.dark ? Qt.rgba(210/255,210/255,210/255,1) : Qt.rgba(96/255,96/255,96/255,1)
|
||||||
@ -74,7 +75,38 @@ TextField{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
selectByMouse: true
|
selectByMouse: true
|
||||||
background: FluTextBoxBackground{ inputItem: control }
|
rightPadding: icon_end.visible ? 50 : 30
|
||||||
|
background: FluTextBoxBackground{
|
||||||
|
inputItem: control
|
||||||
|
FluIcon{
|
||||||
|
id:icon_end
|
||||||
|
iconSource: control.iconSource
|
||||||
|
iconSize: 15
|
||||||
|
opacity: 0.5
|
||||||
|
visible: control.iconSource != 0
|
||||||
|
anchors{
|
||||||
|
verticalCenter: parent.verticalCenter
|
||||||
|
right: parent.right
|
||||||
|
rightMargin: 5
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
FluIconButton{
|
||||||
|
iconSource:FluentIcons.ChromeClose
|
||||||
|
iconSize: 10
|
||||||
|
width: 20
|
||||||
|
height: 20
|
||||||
|
opacity: 0.5
|
||||||
|
visible: control.text !== ""
|
||||||
|
anchors{
|
||||||
|
verticalCenter: parent.verticalCenter
|
||||||
|
right: parent.right
|
||||||
|
rightMargin: icon_end.visible ? 25 : 5
|
||||||
|
}
|
||||||
|
onClicked:{
|
||||||
|
control.text = ""
|
||||||
|
}
|
||||||
|
}
|
||||||
TapHandler {
|
TapHandler {
|
||||||
acceptedButtons: Qt.RightButton
|
acceptedButtons: Qt.RightButton
|
||||||
onTapped: control.echoMode !== TextInput.Password && menu.popup()
|
onTapped: control.echoMode !== TextInput.Password && menu.popup()
|
||||||
|
@ -11,7 +11,7 @@ FluMenu{
|
|||||||
focus: false
|
focus: false
|
||||||
FluMenuItem{
|
FluMenuItem{
|
||||||
text: cutText
|
text: cutText
|
||||||
visible: inputItem.text !== ""
|
visible: inputItem.text !== "" && !inputItem.readOnly
|
||||||
onClicked: {
|
onClicked: {
|
||||||
inputItem.cut()
|
inputItem.cut()
|
||||||
}
|
}
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
import QtQuick.Controls
|
import QtQuick.Controls
|
||||||
import FluentUI
|
import FluentUI
|
||||||
|
|
||||||
Button {
|
FluControl {
|
||||||
|
|
||||||
property bool disabled: false
|
property bool disabled: false
|
||||||
property color normalColor: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
|
property color normalColor: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
|
||||||
|
46
src/controls/FluTextFiled.qml
Normal file
46
src/controls/FluTextFiled.qml
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
import QtQuick
|
||||||
|
import QtQuick.Controls.impl
|
||||||
|
import QtQuick.Templates as T
|
||||||
|
|
||||||
|
T.TextField {
|
||||||
|
id: control
|
||||||
|
|
||||||
|
implicitWidth: implicitBackgroundWidth + leftInset + rightInset
|
||||||
|
|| Math.max(contentWidth, placeholder.implicitWidth) + leftPadding + rightPadding
|
||||||
|
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
|
||||||
|
contentHeight + topPadding + bottomPadding,
|
||||||
|
placeholder.implicitHeight + topPadding + bottomPadding)
|
||||||
|
|
||||||
|
padding: 6
|
||||||
|
leftPadding: padding + 4
|
||||||
|
|
||||||
|
color: control.palette.text
|
||||||
|
selectionColor: control.palette.highlight
|
||||||
|
selectedTextColor: control.palette.highlightedText
|
||||||
|
placeholderTextColor: control.palette.placeholderText
|
||||||
|
verticalAlignment: TextInput.AlignVCenter
|
||||||
|
|
||||||
|
PlaceholderText {
|
||||||
|
id: placeholder
|
||||||
|
x: control.leftPadding
|
||||||
|
y: control.topPadding
|
||||||
|
width: control.width - (control.leftPadding + control.rightPadding)
|
||||||
|
height: control.height - (control.topPadding + control.bottomPadding)
|
||||||
|
|
||||||
|
text: control.placeholderText
|
||||||
|
font: control.font
|
||||||
|
color: control.placeholderTextColor
|
||||||
|
verticalAlignment: control.verticalAlignment
|
||||||
|
visible: !control.length && !control.preeditText && (!control.activeFocus || control.horizontalAlignment !== Qt.AlignHCenter)
|
||||||
|
elide: Text.ElideRight
|
||||||
|
renderType: control.renderType
|
||||||
|
}
|
||||||
|
|
||||||
|
background: Rectangle {
|
||||||
|
implicitWidth: 200
|
||||||
|
implicitHeight: 40
|
||||||
|
border.width: control.activeFocus ? 2 : 1
|
||||||
|
color: control.palette.base
|
||||||
|
border.color: control.activeFocus ? control.palette.highlight : control.palette.mid
|
||||||
|
}
|
||||||
|
}
|
101
src/controls/FluToggleButton.qml
Normal file
101
src/controls/FluToggleButton.qml
Normal file
@ -0,0 +1,101 @@
|
|||||||
|
import QtQuick
|
||||||
|
import QtQuick.Controls
|
||||||
|
import FluentUI
|
||||||
|
|
||||||
|
FluControl {
|
||||||
|
|
||||||
|
property bool disabled: false
|
||||||
|
property bool selected: false
|
||||||
|
property color normalColor: {
|
||||||
|
if(selected){
|
||||||
|
return FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
|
||||||
|
}else{
|
||||||
|
return FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
property color hoverColor: {
|
||||||
|
if(selected){
|
||||||
|
return FluTheme.dark ? Qt.darker(normalColor,1.1) : Qt.lighter(normalColor,1.1)
|
||||||
|
}else{
|
||||||
|
return FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
property color disableColor: {
|
||||||
|
if(selected){
|
||||||
|
return FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
|
||||||
|
}else{
|
||||||
|
return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
property color pressedColor: FluTheme.dark ? Qt.darker(normalColor,1.2) : Qt.lighter(normalColor,1.2)
|
||||||
|
|
||||||
|
id: control
|
||||||
|
enabled: !disabled
|
||||||
|
topPadding:5
|
||||||
|
bottomPadding:5
|
||||||
|
leftPadding:15
|
||||||
|
rightPadding:15
|
||||||
|
Keys.onSpacePressed: control.visualFocus&&clicked()
|
||||||
|
focusPolicy:Qt.TabFocus
|
||||||
|
background: Rectangle{
|
||||||
|
radius: 4
|
||||||
|
border.color: FluTheme.dark ? "#505050" : "#DFDFDF"
|
||||||
|
border.width: selected ? 0 : 1
|
||||||
|
FluFocusRectangle{
|
||||||
|
visible: control.visualFocus
|
||||||
|
radius:8
|
||||||
|
}
|
||||||
|
color:{
|
||||||
|
if(disabled){
|
||||||
|
return disableColor
|
||||||
|
}
|
||||||
|
if(selected){
|
||||||
|
if(pressed){
|
||||||
|
return pressedColor
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return hovered ? hoverColor :normalColor
|
||||||
|
}
|
||||||
|
}
|
||||||
|
contentItem: FluText {
|
||||||
|
text: control.text
|
||||||
|
horizontalAlignment: Text.AlignHCenter
|
||||||
|
verticalAlignment: Text.AlignVCenter
|
||||||
|
color: {
|
||||||
|
if(selected){
|
||||||
|
if(FluTheme.dark){
|
||||||
|
if(disabled){
|
||||||
|
return Qt.rgba(173/255,173/255,173/255,1)
|
||||||
|
}
|
||||||
|
return Qt.rgba(0,0,0,1)
|
||||||
|
}else{
|
||||||
|
return Qt.rgba(1,1,1,1)
|
||||||
|
}
|
||||||
|
}else{
|
||||||
|
if(FluTheme.dark){
|
||||||
|
if(disabled){
|
||||||
|
return Qt.rgba(131/255,131/255,131/255,1)
|
||||||
|
}
|
||||||
|
if(!selected){
|
||||||
|
if(pressed){
|
||||||
|
return Qt.rgba(162/255,162/255,162/255,1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return Qt.rgba(1,1,1,1)
|
||||||
|
}else{
|
||||||
|
if(disabled){
|
||||||
|
return Qt.rgba(160/255,160/255,160/255,1)
|
||||||
|
}
|
||||||
|
if(!selected){
|
||||||
|
if(pressed){
|
||||||
|
return Qt.rgba(96/255,96/255,96/255,1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return Qt.rgba(0,0,0,1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
font.pixelSize: 14
|
||||||
|
}
|
||||||
|
}
|
@ -1,9 +1,9 @@
|
|||||||
import QtQuick 2.0
|
import QtQuick
|
||||||
import QtQuick.Controls 2.0
|
import QtQuick.Controls
|
||||||
import FluentUI
|
import FluentUI
|
||||||
import QtQuick.Layouts
|
import QtQuick.Layouts
|
||||||
|
|
||||||
Button {
|
FluControl {
|
||||||
|
|
||||||
property bool selected: false
|
property bool selected: false
|
||||||
property var clickFunc
|
property var clickFunc
|
||||||
|
@ -61,5 +61,14 @@
|
|||||||
<file>controls/FluPaneItemExpander.qml</file>
|
<file>controls/FluPaneItemExpander.qml</file>
|
||||||
<file>controls/FluTextBoxMenu.qml</file>
|
<file>controls/FluTextBoxMenu.qml</file>
|
||||||
<file>controls/FluMultilineTextBox.qml</file>
|
<file>controls/FluMultilineTextBox.qml</file>
|
||||||
|
<file>controls/FluFlipView.qml</file>
|
||||||
|
<file>controls/FluPivot.qml</file>
|
||||||
|
<file>controls/FluPivotItem.qml</file>
|
||||||
|
<file>controls/FluControl.qml</file>
|
||||||
|
<file>controls/FluTextFiled.qml</file>
|
||||||
|
<file>controls/FluTextArea.qml</file>
|
||||||
|
<file>controls/FluTableView.qml</file>
|
||||||
|
<file>controls/FluPagination.qml</file>
|
||||||
|
<file>controls/FluToggleButton.qml</file>
|
||||||
</qresource>
|
</qresource>
|
||||||
</RCC>
|
</RCC>
|
||||||
|
Binary file not shown.
Binary file not shown.
BIN
third/mingw/libgcc_s_seh-1.dll
Normal file
BIN
third/mingw/libgcc_s_seh-1.dll
Normal file
Binary file not shown.
BIN
third/mingw/libstdc++-6.dll
Normal file
BIN
third/mingw/libstdc++-6.dll
Normal file
Binary file not shown.
BIN
third/mingw/libwinpthread-1.dll
Normal file
BIN
third/mingw/libwinpthread-1.dll
Normal file
Binary file not shown.
BIN
third/msvc/libcrypto-1_1-x64.dll
Normal file
BIN
third/msvc/libcrypto-1_1-x64.dll
Normal file
Binary file not shown.
BIN
third/msvc/libssl-1_1-x64.dll
Normal file
BIN
third/msvc/libssl-1_1-x64.dll
Normal file
Binary file not shown.
Reference in New Issue
Block a user