笔记笔记
  • Home
  • AI&ML
  • Example
  • Zoo
  • 关于
⌘ K
介绍
全部
通用
Button 按钮
反馈
模态弹窗
demo
dumi demo
Ant Design Demo
KaTeX Demo
UML Demo
Function Plot
简单函数曲线
图表
自动 API 表格
最后更新时间：
Copyright © 2023-2024 | Powered by dumi | GuoDapeng | 冀ICP备20004032号-1 | 冀公网安备 冀公网安备 13024002000293号

TABLE OF CONTENTS

‌
‌
‌
‌

模态弹窗

SwiftUI

import SwiftUI


struct ModalView: View {
    @State private var showingPopover = false
    var body: some View {
        ZStack {
            VStack {
                Text("Content")
                Button("Show Menu") {
                    self.showingPopover.toggle()
                }
                // 这里，popover 与 sheet 的行为看似一致
                .popover(isPresented: $showingPopover) {
                    ZStack {
                        Text("Your content here")
                    }
                    .ignoresSafeArea()
                }
            }
        }
        .ignoresSafeArea()
    }
}


#Preview("SearchView Light Mode") {
    ModalView()
        .preferredColorScheme(.light)
}

ArkUI

自定义弹窗合集 - 官方 Samples 这里有更加丰富的示例。

@Entry
@Component
struct Index {
  @State isShowSheet: boolean = false;


  @Builder
  mySheet() {
    Column() {
      Text('Content')
    }
    .padding(18)
  }


  build() {
    Column() {
      Text('Content')
      Button('Show Menu')
        .onClick(() => {
          this.isShowSheet = !this.isShowSheet;
        })
        .bindSheet($$this.isShowSheet, this.mySheet(), {
          height: '98%',
          dragBar: false,
          showClose: false
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

Compose Multiplatform

package icu.guodapeng.project


import androidx.compose.foundation.layout.*
import androidx.compose.foundation.selection.toggleable
import androidx.compose.material.*
import androidx.compose.ui.*
import androidx.compose.runtime.*
import androidx.compose.ui.semantics.Role
import androidx.compose.ui.unit.dp
import org.jetbrains.compose.ui.tooling.preview.Preview
import kotlinx.coroutines.launch


@Composable
@Preview
fun App() {
    MaterialTheme {
        var skipHalfExpanded by remember { mutableStateOf(true) }
        val state = rememberModalBottomSheetState(
            initialValue = ModalBottomSheetValue.Hidden, skipHalfExpanded = skipHalfExpanded
        )
        val scope = rememberCoroutineScope()
        ModalBottomSheetLayout(sheetState = state, sheetContent = {
            Column(horizontalAlignment = Alignment.CenterHorizontally) {
                Text("Menu")
                Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
                    Text("Your content here")
                }
            }


        }) {
            Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
                Column(horizontalAlignment = Alignment.CenterHorizontally) {
                    Text("Content")
                    Row(
                        Modifier.toggleable(value = skipHalfExpanded,
                            role = Role.Checkbox,
                            onValueChange = { checked -> skipHalfExpanded = checked })
                    ) {
                        Checkbox(checked = skipHalfExpanded, onCheckedChange = null)
                        Spacer(Modifier.width(16.dp))
                        Text("Skip Half Expanded State")
                    }
                    Spacer(Modifier.height(20.dp))
                    Button(onClick = { scope.launch { state.show() } }) {
                        Text("Show Menu")
                    }
                }
            }
        }
    }
}

Flutter

import 'package:flutter/material.dart';


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


class MyApp extends StatelessWidget {
  const MyApp({super.key});


  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}


class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});


  final String title;


  @override
  State<MyHomePage> createState() => _MyHomePageState();
}


class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'Content',
            ),
            ElevatedButton(
                onPressed: () {
                  _showBottomModal(context);
                },
                child: const Text('Show Menu')),
          ],
        ),
      ),
    );
  }


  _showBottomModal(context) {
    showModalBottomSheet(
      // isScrollControlled: true, // 这个可以让 Sheet 是全高的，但是我没理解其中的原理
      // showDragHandle: true, // 这个是显示一个拖拽手势，就是一个视觉上的提示
      context: context,
      backgroundColor: Colors.blue,
      builder: (builder) {
        return Container(
          color: Colors.transparent,
          child: Padding(
            padding: EdgeInsets.all(8),
            child: Column(
              children: <Widget>[
                Container(),
                const Text(
                  'Your content here',
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}
Preview
Preview
Preview
Preview