我怎样才能在flutter中实现这样的按钮呢?我希望这些按钮被粘在屏幕的侧面,并在屏幕中浮动,就像底部导航一样,但在侧面而不是在底部。我希望你们都明白这个想法。
lb3vh1jj1#
您可以使用RotatedBox小部件,如下所示:
class NewButton extends StatelessWidget { const NewButton({super.key}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text("App Today")), body: Column( children: [ GestureDetector( onTap: () {}, child: Container( width: 40, height: 100, decoration: BoxDecoration( color: Color.fromARGB(255, 54, 105, 247), borderRadius: BorderRadius.horizontal(right: Radius.circular(20)), border: Border.all( width: 2.0, color: Color.fromARGB(221, 8, 1, 24))), child: const RotatedBox( quarterTurns: 1, child: Text('REGISTER', style: TextStyle( fontSize: 18, color: Colors.white, ), textAlign: TextAlign.center)), ), ) ], ), ); } }
9q78igpj2#
坚持以下步骤:1.创建一个简单的ElevatedButton1.自定义它,使它看起来像你想要的1.用Stack小部件 Package Scaffold1.设置Stack到alignment: Alignment.center的对齐方式1.在Stack的子节点中,此时Scaffold应该是Stack的children属性中的直接子节点,请确保这一点1.将ElevatedButton也添加到children属性,它应该是Scaffold小部件的同级1.用Postioned小部件 Package 您创建的ElevatedButton。1.将Positioned的left属性设置为0,left: 0,1.现在用一个Transform.rotate小工具来旋转这个按钮。1.将dart的dart:math构建库中的angle属性设置为pi。
ElevatedButton
Stack
Scaffold
alignment: Alignment.center
children
Postioned
Positioned
left
left: 0,
Transform.rotate
dart:math
angle
pi
2条答案
按热度按时间lb3vh1jj1#
您可以使用RotatedBox小部件,如下所示:
9q78igpj2#
坚持以下步骤:
1.创建一个简单的
ElevatedButton
1.自定义它,使它看起来像你想要的
1.用
Stack
小部件 PackageScaffold
1.设置
Stack
到alignment: Alignment.center
的对齐方式1.在
Stack
的子节点中,此时Scaffold应该是Stack
的children
属性中的直接子节点,请确保这一点1.将
ElevatedButton
也添加到children
属性,它应该是Scaffold
小部件的同级1.用
Postioned
小部件 Package 您创建的ElevatedButton
。1.将
Positioned
的left
属性设置为0,left: 0,
1.现在用一个
Transform.rotate
小工具来旋转这个按钮。1.将dart的
dart:math
构建库中的angle
属性设置为pi
。