📜  Flutter – 创建底部表 GetX 库

📅  最后修改于: 2021-09-02 05:44:14             🧑  作者: Mango

Bottomsheets在底部显示,以显示我们想要显示的任何内容的表。通常,当我们创建 bottomsheet 时,创建的语法很长,并且还使用了上下文。为了避免这种情况,我们可以在 GetX 库的帮助下用简单的代码创建底部表。我们也可以在无状态小部件中使用语法 Get.bottomsheet() 创建,并且没有必要使用有状态小部件来创建底部表。所以 GetX 在很多方面都非常强大,它在我们的开发中帮助了很多。

按照以下步骤使用 GetX 创建底板:

  • 创建一个新的Flutter应用程序:
flutter create app_name
  • 获取包添加到 pubspec.yaml 文件:

  • main 中导入get。dart文件:
import 'package:get/get.dart';
  • 在 main.js 中编写代码。 dart文件以创建底部表。

Get.bottomSheet() 的构造函数:

Future bottomSheet(Widget bottomsheet, 
{Color? backgroundColor, 
double? elevation, 
bool persistent = true, 
ShapeBorder? shape, 
Clip? clipBehavior, 
Color? barrierColor, 
bool? ignoreSafeArea, 
bool isScrollControlled = false, 
bool useRootNavigator = false, 
bool isDismissible = true, 
bool enableDrag = true, 
RouteSettings? settings, 
Duration? enterBottomSheetDuration, 
Duration? exitBottomSheetDuration})

让我们讨论一下 Get.bottomSheet() 的一些属性:

  • backgroundColor :底部工作表的背景颜色。
  • shape :提供给底片的形状。
  • barrierColor :打开底片时显示的屏障颜色。
  • isDismissible :当我们想通过单击底部表外部来关闭底部表时,其值应为 true 否则为 false。
  • enableDrag :如果它被设置为 false 那么我们不能拖动底部表。默认情况下,它设置为 true。

主要的。dart文件:

Dart
import 'package:flutter/material.dart';
import 'package:get/get.dart';
 
void main() {
  runApp(MyApp());
}
 
class MyApp extends StatelessWidget {
   
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Bottomsheet',
      theme: ThemeData(
 
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}
 
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GeeksforGeeks Bottomsheet'),
        backgroundColor: Colors.green[400],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              child: Text('Show bottomsheet'),
              onPressed: (){
                Get.bottomSheet( 
                  Container(
                    height: 150,
                    color: Colors.greenAccent,
                    child:Column(
                      children: [
                        Text('Hii 1', textScaleFactor: 2),
                        Text('Hii 2',  textScaleFactor: 2),
                        Text('Hii 3',  textScaleFactor: 2),
                        Text('Hii 4',  textScaleFactor: 2),
                      ],
                    )
                  ),
                  barrierColor: Colors.red[50],
                  isDismissible: false,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(35),
                    side: BorderSide(
                      width: 5,
                      color: Colors.black
                    )
                  ),
                  enableDrag: false,
 
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}


解释:

  • 第一步是使用GetMaterialApp构建应用程序以包含GetX库的功能。
  • 提供 home 作为 HomePage()。
  • 创建 Scaffold 并在其中创建 AppBar 和 body。
  • 在主体内部创建一个按钮,然后编写代码以创建底部表。
  • Get.bottomSheet() 可以在不使用上下文的情况下创建。
  • 给 Get.bottomSheet() 添加一些属性,让它更漂亮。

输出:

Get.bottomSheet(  
                  Container(
                    height: 150,
                    color: Colors.greenAccent,
                    child:Column(
                      children: [
                        Text('Hii 1', textScaleFactor: 2),
                        Text('Hii 2',  textScaleFactor: 2),
                        Text('Hii 3',  textScaleFactor: 2),
                        Text('Hii 4',  textScaleFactor: 2),
                      ],
                    )
                  ),
                  barrierColor: Colors.red[50],
                  isDismissible: false,
                );

执行上述代码时,输出为:

Get.bottomSheet(  
                  Container(
                    height: 150,
                    color: Colors.greenAccent,
                    child:Column(
                      children: [
                        Text('Hii 1', textScaleFactor: 2),
                        Text('Hii 2',  textScaleFactor: 2),
                        Text('Hii 3',  textScaleFactor: 2),
                        Text('Hii 4',  textScaleFactor: 2),
                      ],
                    )
                  ),
                  barrierColor: Colors.red[50],
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(35),
                    side: BorderSide(
                      width: 5,
                      color: Colors.black
                    )
                  ),
                  enableDrag: false,

                );

当使用这些属性执行上述代码时,输出将是: