Flutter

Question

对于我的 Flutter 应用程序，我希望四个按钮在一起是一个圆圈。这是我有点想要的图像。

我不知道如何在 flutter 中设置按钮角的样式。在按钮 1 的情况下，我的想法是取左上角并设置边框半径并保持其他角正常。对于其他按钮，我会对适当的角做同样的事情。为了排列我的“披萨片”，我会使用列和行。我只是不知道也无法弄清楚如何只设计一个角。

在此先感谢大家的帮助。

Answer 1

一个可能的解决方案是创建一个具有固定宽度和高度的容器。然后你用 BorderRadius.only 为左上角、右上角等设置背景颜色和边框半径。现在您只需创建一个包含两行的列，其中包含您各自的容器。

例如：

// pizza_button.dart
enum PizzaPosition { topLeft, topRight, bottomLeft, bottomRight }

class PizzaButton extends StatelessWidget {
  final PizzaPosition pizzaPosition;
  final _buttonSize = 60.0;

  const PizzaButton({Key? key, required this.pizzaPosition}) : super(key: key);

  BorderRadiusGeometry? _generateBorderRadius() {
    switch (pizzaPosition) {
      case PizzaPosition.topLeft:
        return BorderRadius.only(
          topLeft: Radius.circular(_buttonSize),
        );
      case PizzaPosition.topRight:
        return BorderRadius.only(
          topRight: Radius.circular(_buttonSize),
        );
      case PizzaPosition.bottomLeft:
        return BorderRadius.only(
          bottomLeft: Radius.circular(_buttonSize),
        );
      case PizzaPosition.bottomRight:
        return BorderRadius.only(
          bottomRight: Radius.circular(_buttonSize),
        );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: _buttonSize,
      height: _buttonSize,
      margin: EdgeInsets.all(1.0),
      alignment: Alignment.center,
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: _generateBorderRadius(),
      ),
      child: Text("1"),
    );
  }
}

对于整个“披萨”，一个示例小部件是

class Pizza extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              PizzaButton(pizzaPosition: PizzaPosition.topLeft),
              PizzaButton(pizzaPosition: PizzaPosition.topRight),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              PizzaButton(pizzaPosition: PizzaPosition.bottomLeft),
              PizzaButton(pizzaPosition: PizzaPosition.bottomRight),
            ],
          )
        ],
      ),
    );
  }
}

现在要让它像按钮一样工作，您应该将容器包装在 GestureDetectors 中的 PizzaButton 中，并指定您的操作 onTap，例如可以作为 PizzaButton 的另一个属性。

Answer 2

你可以像这样在卡片里面做

@override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('My App'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Card(
            clipBehavior: Clip.antiAlias,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(60.0),
            ),
            child: SizedBox(
              width: 120,
              height: 120,
              child: Center(
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Expanded(
                      child: Row(
                        children: [
                          Expanded(
                            child: InkWell(
                                onTap: () {},
                                child: Padding(
                                  padding: const EdgeInsets.all(16.0),
                                  child: Text("1"),
                                )),
                          ),
                          Expanded(
                            child: InkWell(
                                onTap: () {},
                                child: Padding(
                                  padding: const EdgeInsets.all(16.0),
                                  child: Text("2"),
                                )),
                          )
                        ],
                      ),
                    ),
                    Expanded(
                      child: Row(
                        mainAxisSize: MainAxisSize.min,
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Expanded(
                            child: InkWell(
                                onTap: () {},
                                child: Padding(
                                  padding: const EdgeInsets.all(16.0),
                                  child: Text("1"),
                                )),
                          ),
                          Expanded(
                            child: InkWell(
                                onTap: () {},
                                child: Padding(
                                  padding: const EdgeInsets.all(16.0),
                                  child: Text("2"),
                                )),
                          )
                        ],
                      ),
                    )
                  ],
                ),
              ),
            ),
          ),
        ));
  }

Answer 3

您好，我使用网格视图和“Clip R Rec t”来做到这一点 enter image description here

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: ClipRRect(
            borderRadius: BorderRadius.circular(100),
            child: Container(
              height: 120,
              width: 120,
              child: GridView.count(
                primary: false,
                padding: const EdgeInsets.all(0),
                crossAxisSpacing: 3,
                mainAxisSpacing: 3,
                crossAxisCount: 2,
                children: [
                  ElevatedButton(
                    onPressed: () {},
                    child: Text("1", textAlign: TextAlign.right),
                    style: ElevatedButton.styleFrom(
                      primary: Colors.blueGrey,
                    ),
                  ),
                  ElevatedButton(
                    onPressed: () {},
                    child: Text("2", textAlign: TextAlign.center),
                    style: ElevatedButton.styleFrom(
                      primary: Colors.blueGrey,
                    ),
                  ),
                  ElevatedButton(
                    onPressed: () {},
                    child: Text("3", textAlign: TextAlign.center),
                    style: ElevatedButton.styleFrom(
                      primary: Colors.blueGrey,
                    ),
                  ),
                  ElevatedButton(
                    onPressed: () {},
                    child: Text("4", textAlign: TextAlign.center),
                    style: ElevatedButton.styleFrom(
                      primary: Colors.blueGrey,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

并且您可以使用 Align 小部件并将您的数字对齐，这样您就可以拥有漂亮的 UI，就像这样：enter image description here

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: ClipRRect(
            borderRadius: BorderRadius.circular(100),
            child: Container(
              height: 120,
              width: 120,
              child: GridView.count(
                primary: false,
                padding: const EdgeInsets.all(0),
                crossAxisSpacing: 3,
                mainAxisSpacing: 3,
                crossAxisCount: 2,
                children: [
                  ElevatedButton(
                    onPressed: () {},
                    child: Align(
                      alignment: Alignment(0.5, 0),
                      child: Text("1", textAlign: TextAlign.center),
                    ),
                    style: ElevatedButton.styleFrom(
                      primary: Colors.blueGrey,
                    ),
                  ),
                  ElevatedButton(
                    onPressed: () {},
                    child: Align(
                      alignment: Alignment(-0.5, 0),
                      child: Text("2", textAlign: TextAlign.center),
                    ),
                    style: ElevatedButton.styleFrom(
                      primary: Colors.blueGrey,
                    ),
                  ),
                  ElevatedButton(
                    onPressed: () {},
                    child: Align(
                      alignment: Alignment(0.5, 0),
                      child: Text("3", textAlign: TextAlign.center),
                    ),
                    style: ElevatedButton.styleFrom(
                      primary: Colors.blueGrey,
                    ),
                  ),
                  ElevatedButton(
                    onPressed: () {},
                    child: Align(
                      alignment: Alignment(-0.5, 0),
                      child: Text("4", textAlign: TextAlign.center),
                    ),
                    style: ElevatedButton.styleFrom(
                      primary: Colors.blueGrey,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

您可以比较图像和代码，如果您喜欢我的回答并且它很有用，我很乐意让您评价我的回答。谢谢。

Answer 4

在此感谢大家！我得到了基于这个问题的解决方案： [

并且基于@fusion

的回答

我的解决方案如下所示：

import 'package:flutter/material.dart';

enum QuarterPosition { topLeft, topRight, bottomLeft, bottomRight }

class QuarterButton extends StatelessWidget {
  const QuarterButton({Key? key, required this.position, this.size = 100, this.text = ""}) : super(key: key);

  final QuarterPosition position;
  final double size;
  final String text;

  BorderRadiusGeometry _generateBorderRadius() {
    switch (position) {
      case QuarterPosition.topLeft:
        return BorderRadius.only(
          topLeft: Radius.circular(size),
        );
      case QuarterPosition.topRight:
        return BorderRadius.only(
          topRight: Radius.circular(size),
        );
      case QuarterPosition.bottomLeft:
        return BorderRadius.only(
          bottomLeft: Radius.circular(size),
        );
      case QuarterPosition.bottomRight:
        return BorderRadius.only(
          bottomRight: Radius.circular(size),
        );
    }
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
        onPressed: () {},
        child: Text(text, style: TextStyle(fontSize: 30, color: Colors.white)),
        style: ElevatedButton.styleFrom(
          primary: Colors.black54,
          fixedSize: Size(size, size),
          shape: RoundedRectangleBorder(
              borderRadius: _generateBorderRadius(),
              ),
              side: BorderSide(color: Colors.white)),
        );
  }
}

我现在可以像那样使用它了。

Column(
      children: [
        Row(
          children: [
            QuarterButton(position: QuarterPosition.topLeft, size: 100, text: "1"),
            QuarterButton(position: QuarterPosition.topRight, size: 100, text: "2"),
          ],
        ),
        Row(
          children: [
            QuarterButton(position: QuarterPosition.bottomLeft, size: 100, text: "3"),
            QuarterButton(position: QuarterPosition.bottomRight, size: 100, text: "4"),
          ],
        ),
      ],
    );

感谢您的快速回答。很棒的社区！ :)

Flutter - 四分之一圆形按钮

Flutter - Quarter round Button

button

rounded-corners

cornerradius