Flutter振——BottomSheet 类

底部工作表是在屏幕上显示各种选项的流行方式之一。这有助于用户切换到新屏幕。您将在大多数应用程序中看到此底部表格以添加数据或添加一些信息，例如地址或票号。在本文中，我们将看到如何在我们的Flutter应用程序中实现 Bottom Sheet。

BottomSheet 类的构造函数：

BottomSheet({Key key,
AnimationController animationController,
bool enableDrag: true,
BottomSheetDragStartHandler onDragStart,
BottomSheetDragEndHandler onDragEnd,
Color backgroundColor,
double elevation,
ShapeBorder shape,
Clip clipBehavior,
@required
VoidCallback onClosing,
@required 
WidgetBuilder builder})

BottomSheet 类的属性：

• backgroundColor：它用于为底部工作表提供背景颜色。
• 海拔：它用于为我们的底部工作表提供海拔。
• builder：它为工作表的内容提供了一个构建器。
• clipBehaviour：用于按指定裁剪工作表的内容。
• enableDrag：如果为true，则可以上下拖动底部工作表并通过向下滑动来消除。
• hashCode：表示对象的哈希码。
• key：用于处理一个小部件如何替换树中的另一个小部件。
• onClosing：用于在底部工作表关闭时分配操作。
• onDragEnd：当用户停止拖动底部工作表时调用。
• onDragStart：当用户开始拖动底部表单时调用。
• runTimeType：对象的运行时类型的表示。
• shape：它定义了底片的形状。

现在让我们看看Bottom sheet的实现。要在Flutter实现底部工作表，您必须遵循以下步骤：

第 1 步：导航到 main。 dart() 文件并返回 Material App()

首先，我们在 main函数中的 runApp 中声明了MyApp() 。然后我们为 MyApp 创建了StatefullWidget ，其中我们返回了MaterialApp()。在这个MaterialApp() 中，我们给了我们的应用程序的标题，然后将我们的应用程序的主题声明为黑暗主题。然后我们在首页给出了我们的第一个屏幕或滑块应用程序： HomePage()

Dart

void main() {
  runApp(MyApp());
}
  
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      //First Screen of our App
      home: HomePage(),
    );
  }
}

创建一个 StatefulWidget()：

使用以下代码创建一个为应用程序提供基本结构的 StatefulWidget。在这段代码中，我们首先为HomePage()创建了StatefulWidget 。在这个HomePage() 中，我们返回了Scaffold() Widget。

Dart

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}
  
class _HomePageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold();

第 2 步：构建底部表

在这个 Scaffold Widget 中，我们给出了 appbar，其中我们给出了Appbar 的标题。在那之后，我们在 body 中声明了一个Container() ，它被Center Widget包裹并给出了一个示例文本“Hello”。

Dart

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}
  
class _HomePageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //Appbar along with Title
      appBar: AppBar(
        title: Text("Bottom Sheet"),
      ),
      body:Center(
          
        //Sample Text Written in Center of Screen
        child: Container(
          child: Text("Hello"),
        ),
      ),
    );
  }
}

第 3 步：创建并添加一个 FloatingAction 按钮

现在创建一个浮动操作按钮，然后我们分配floatingactionButton并在此按钮给出另外的图标。在 on Pressed 方法中，我们已经声明了showModalBottomSheet()。然后，我们在其中提供了包含在SingleChildScrollView()小部件中的 Container 小部件。用于滚动底部工作表中的内容。我们再次声明了一个用于底部工作表的Container() ，其中我们为右上角和左上角指定了边框半径，使这个 Container 成为圆形。

Dart

//Floating Action Button      
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add, color: Colors.white),
        onPressed: (){
          showModalBottomSheet(context: context, builder: (context){
              
            //Scrolling given for content in Container()
            return SingleChildScrollView(
              child: Container(
                padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
  
                child: Container(
                  padding: EdgeInsets.all(20),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.only(
                      topRight: Radius.circular(20),
                      topLeft: Radius.circular(20),
                    ),
                  ),

第 4 步：创建 Column 以显示内容

在这个Container() 中，我们已经声明了Column()小部件，我们在其中提供了它的孩子。首先，我们在 Container() 中添加了文本标题。之后我们添加了TextField()。在此 TextField() 中，我们提供了InputDecoration()用于声明提示文本。然后我们添加了边框作为OutLineInputBorder()用于提供边框侧边颜色。我们也可以通过在 OutlineInputBorder() 中添加边框半径来使 TextField 成为圆形。在我们给出一个RaisedButton()之后，我们给出了写在按钮上的文本和按钮的颜色。

Dart

//Create a Column to display it's content
       child: Column(
         children: [
           Text("Add Data",style: TextStyle(fontWeight: FontWeight.w600,
                                            color: Colors.green,
                                            fontSize: 20),),
           SizedBox(height: 10.0),
           // TextField for giving some Input
           TextField(
             decoration: InputDecoration(
               border: OutlineInputBorder(
                 borderSide: BorderSide(color: Colors.green),
               ),
               hintText: "Add Item",
               hintStyle: TextStyle(color: Colors.grey),
             ),
           ),
           SizedBox(height: 10),
             
           //Button for adding items
           RaisedButton(
             color: Colors.grey,
             child: Text("ADD",style: TextStyle(color: Colors.white),
             ),
           )
         ],
       ),

输出：

想要一个更快节奏和更具竞争力的环境来学习 Android 的基础知识吗?

单击此处前往由我们的专家精心策划的指南，旨在让您立即做好行业准备！