笔记笔记
  • 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

‌
‌
‌
‌

Button 按钮

SwiftUI

import SwiftUI


struct ButtonView: View {
    var body: some View {
        VStack {
            Button(action: {}) {
                Text("有阴影的按钮").foregroundColor(Color.white)
            }
            .frame(width: 160, height: 56, alignment: .center)
            .background(Color.blue)
            .clipShape(Capsule())
            .shadow(color: Color.black.opacity(0.1), radius: 20, x: 0, y: 4)
            .shadow(color: Color.black.opacity(0.1), radius: 4, x: 0, y: 2)


            Button(action: {}) {
                Text("按钮").foregroundColor(Color(red: 0.071, green: 0.071, blue: 0.114)).opacity(0.3)
            }
            .frame(width: 160, height: 56, alignment: .center)
            .background(Color.white)
            .clipShape(Capsule())
            .shadow(color: Color.black.opacity(0.1), radius: 20, x: 0, y: 4)
            .shadow(color: Color.black.opacity(0.1), radius: 4, x: 0, y: 2)


            Button(action: {}) {
                Text("按钮").foregroundColor(Color.white)
            }
            .frame(width: 160, height: 56, alignment: .center)
            .background(Color.blue)
            .clipShape(Capsule())


            Button(action: {}) {
                HStack {
                    Text("But").foregroundColor(Color.white)
                    Spacer()
                    Image(systemName: "arrow.forward")
                        .foregroundColor(Color.white)
                        .frame(width: 24, height: 24, alignment: .center)
                }
                .frame(width: 160 - 56 - 8, height: 56, alignment: .center)
            }
            .frame(width: 160, height: 56, alignment: .center)
            .background(Color.blue)
            .clipShape(Capsule())


            Button {


            } label: {
                Text("Learn More").foregroundColor(Color.white)
            }
            .frame(width: 160, height: 56, alignment: .center)
            .background(Color(red: 0.258, green: 0.842, blue: 0.053))
            .clipShape(Capsule())


            Button {


            } label: {
                Text("Learn More").foregroundColor(Color.white)
            }
            .frame(width: 160, height: 56, alignment: .center)
            .background(Color.green)
            .clipShape(Capsule())


            Button {


            } label: {
                Text("了解更多").foregroundColor(Color.white)
            }
            .frame(width: 160, height: 56, alignment: .center)
            .background(Color(red: 1, green: 0.137, blue: 0.263))
            .clipShape(Capsule())


            Button {


            } label: {
                HStack {
                    Text("Done").foregroundColor(Color.white).bold()
                    Spacer()
                    Image(systemName: "checkmark")
                        .foregroundColor(Color.white)
                        .frame(width: 24, height: 24, alignment: .center)
                }
                .frame(width: 160 - 56 - 8, height: 56, alignment: .center)
            }
            .frame(width: 160, height: 56, alignment: .center)
            .background(Color(red: 0, green: 0.031, blue: 0.779))
            .clipShape(Capsule())
            .shadow(color: Color.black.opacity(0.1), radius: 20, x: 0, y: 4)
            .shadow(color: Color.black.opacity(0.1), radius: 4, x: 0, y: 2)
        }
    }
}


struct ButtonView_Previews: PreviewProvider {
    static var previews: some View {
        ButtonView()
    }
}

ArkUI

@Entry
@Component
struct ButtonView {
  build() {
    Row() {
      Column({ space: 18 }) {
        Button('有阴影的按钮')
          .width(160)
          .height(56)
          .borderRadius(80)
            // 没有找到设置多个叠加阴影的办法，没有找到设置阴影透明度的办法
          .shadow({ radius: 20, color: 0x000000, offsetX: 0, offsetY: -20 })
          .shadow({ radius: 20, color: 0x000000, offsetX: 0, offsetY: 20 })


        Button('按钮')
          .fontColor(Color.Gray)
          .width(160)
          .height(56)
          .backgroundColor(Color.White)
          .borderRadius(80)
            // 没有找到设置多个叠加阴影的办法，没有找到设置阴影透明度的办法
          .shadow({ radius: 20, color: 0x000000, offsetX: 0, offsetY: -20 })
          .shadow({ radius: 20, color: 0x000000, offsetX: 0, offsetY: 20 })


        Button('按钮')
          .width(160)
          .height(56)
          .borderRadius(80)


        Button() {
          Row() {
            Text('But').fontSize(16).fontWeight(FontWeight.Bold).fontColor(Color.White)
            Blank()
            Image($r('app.media.ic_public_arrow_right_filled'))
              .width(24)
              .height(24)
              .fillColor(Color.White)
          }
          .width(160 - 56 - 8)
        }
        .width(160)
        .height(56)


        Button() {
          Text('Learn More').fontSize(16).fontColor(Color.White)
        }
        .backgroundColor(0x42D70D)
        .width(160)
        .height(56)


        Button() {
          Text('Learn More').fontSize(16).fontColor(Color.White)
        }
        .backgroundColor(Color.Green)
        .width(160)
        .height(56)


        Button() {
          Text('了解更多').fontSize(16).fontColor(Color.White)
        }
        .backgroundColor(0xFF2343)
        .width(160)
        .height(56)


        Button() {
          Row() {
            Text('Done').fontSize(16).fontWeight(FontWeight.Bold).fontWeight(FontWeight.Bold).fontColor(Color.White)
            Blank()
            Image($r('app.media.ic_public_ok_filled'))
              .width(24)
              .height(24)
              .fillColor(Color.White)
          }
          .width(160 - 56 - 8)
        }
        .backgroundColor(0x0008C7)
        .width(160)
        .height(56)
      }
      .width('100%')
    }
    .height('100%')
  }
}

Jetpack Compose

package icu.guodapeng.compass.example


import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import icu.guodapeng.compass.ui.theme.CompassTheme


class ButtonActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            CompassTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background
                ) {
                    ButtonView()
                }
            }
        }
    }
}


@Composable
fun ButtonView() {
    Column(modifier = Modifier.padding(8.dp)) {
        Button(
            onClick = { /*TODO*/ },
            Modifier
                .width(160.dp)
                .height(56.dp)
                .shadow(8.dp, CircleShape),
        ) {
            Text("有阴影的按钮")
        }
        Spacer(modifier = Modifier.height(8.dp))
        Button(
            onClick = { /*TODO*/ },
            Modifier
                .width(160.dp)
                .height(65.dp)
                .shadow(8.dp, CircleShape, true, Color(0xFF00BCD4), Color(0xFFFF9800))
        ) {
            Text("But")
        }
        ExtendedFloatingActionButton(
            onClick = { /* ... */ },
            icon = {
                Icon(
                    Icons.Filled.Favorite,
                    contentDescription = "Favorite"
                )
            },
            text = { Text("Like") }
        )
    }
}


@Preview
@Composable
fun ButtonView_Previews() {
    CompassTheme {
        ButtonView()
    }
}

Flutter

import 'package:flutter/material.dart';


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


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


  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      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> {
  int _counter = 0;


  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
            FloatingActionButton.extended(
                onPressed: () {},
                label: Row(children: <Widget>[
                  Text('But But But But '),


                ]))
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}
Preview
Preview
Preview
Preview