Question

我正在尝试在颤动中创建一个圆。我想添加多个按钮并将它们绑定成这样的圆圈。
被标记的字段应该是按钮，课程1 只是文本。我可以创建类似这样的东西，但是它只是在按钮中分割字符串。

这是我的代码。我对如何执行此任务一无所知。我是新来的人。

import 'package:flutter/material.dart';
void main(){runApp(MyApp());}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
  appBar: new AppBar(
    title: Text("Student home"),
  ),
  body:Center(
    child: Container(
      margin: EdgeInsets.all(10),
      padding: EdgeInsets.all(10),
      width: 200,
      height: 200,
      child: Center(
        child: Text("Course 1 \n Course 2",

            style: TextStyle(fontSize: 12.0,
              fontStyle: FontStyle.italic,


        ),

          textAlign: TextAlign.center,

        ),
      ),
      decoration: BoxDecoration(
        border:Border.all(width:3),
        borderRadius: BorderRadius.all(
          Radius.circular(50),
        ),
          color: Colors.yellow,
      ),
    ),
  )
),
);

} }

Answer 1

您想要这个设计吗？

它包含两个按钮和一个文本小部件

 body: Center(
        child: Container(
          margin: EdgeInsets.all(10),
          padding: EdgeInsets.all(10),
          width: 200,
          height: 200,
          child: Center(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  "Course 1",
                  style: TextStyle(
                    fontSize: 12.0,
                    fontStyle: FontStyle.italic,
                  ),
                  textAlign: TextAlign.center,
                ),
                MaterialButton(
                  onPressed: () {
                    //do whatever you want
                  },
                  child: Text("Mark Attendance"),
                ),
                MaterialButton(
                  onPressed: () {
                    //do whatever you want
                  },
                  child: Text("Mark Attendance"),
                ),
              ],
            ),
          ),
          decoration: BoxDecoration(
            border: Border.all(width: 3),
            borderRadius: BorderRadius.all(
              Radius.circular(200),
            ),
            color: Colors.yellow,
          ),
        ),
      ),

Answer 2

尝试shape: BoxShape.circle,，

          Container(
            width: 100,
            height: 100,
            decoration: BoxDecoration(
              border: Border.all(width: 2),
              shape: BoxShape.circle,
              // You can use like this way or like the below line
              //borderRadius: new BorderRadius.circular(30.0),
              color: Colors.amber,
            ),
            child:Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text('ABC'),
                Text('XYZ'),
                Text('LOL'),
              ],
            ),
          ),

输出

Answer 3

有多种方法可以使边框变圆。截至目前，您在使用固定的高度和宽度时，始终使用更大的边框半径数字。

例如当您的高度为200X200时，请使用150-200数字作为边界半径。

这是在容器的高度和宽度固定时可以正常工作的代码。

注意：这仅在容器的高度和宽度固定时有效，因为代码中的填充是静态的。如果要动态填充，请使用屏幕计算技术来做出响应

使Flutter中的所有小部件都可点击。

有几个小部件可用来使任何小部件都可点击

手势检测器

此窗口小部件具有许多方法，包括onTap()，这意味着您可以在用户单击窗口小部件时附加回调。例如（在您的代码中使用）

GestureDetector( onTap: (){}, //this is call back on tap child: Text("Mark Attendance") )
InkWell小部件（注意：此小部件仅在它是Material小部件的子级时才起作用）

Material( child: InkWell( onTap: (){}, child: Text("Mark Attendance"), ), )

这是工作代码。

import 'package:flutter/material.dart';
void main(){runApp(MyApp());}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
  appBar: new AppBar(
    title: Text("Student home"),
  ),
  body:Center(
    child: Container(
      margin: EdgeInsets.all(10),
      padding: EdgeInsets.all(10),
      width: 200,
      height: 200,
      child: Column(

        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.only(bottom:40.0,top: 20.0),
            child: Text("Course 1"),
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[

             Padding(
               padding: const EdgeInsets.all(8.0),
               child: GestureDetector(
                 onTap: (){},
                 child: Text("Mark Attendance")),
             ),
             Padding(
               padding: const EdgeInsets.all(8.0),
               child:Material(
                 child: InkWell(
                   onTap: (){},
                   child: Text("Mark Attendance"),
                 ),
               )
             ),
          ],)
        ],
      ),
      decoration: BoxDecoration(
        border:Border.all(width:3),
        borderRadius: BorderRadius.all(
          Radius.circular(150),
        ),
          color: Colors.yellow,
      ),
    ),
  )
),
);
} }

注意：“材质”小部件始终将文本的背景设置为白色小部件

谢谢，我希望信息对您有所帮助

多个按钮/文本呈圆形闪烁

3 个答案: