Question

是否可以在此showModalBottomSheet上设置标题以及导航后退按钮？

我希望这样...

Answer 1

是的，在Flutter中可以做类似的事情。您可以使用Column Widget，并使它的第一个子控件作为标题栏或带有标题和后退箭头图标的东西。

这是代码：

import 'dart:async';

import 'package:flutter/material.dart';



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

class MyApp extends StatelessWidget {

   @override
   Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        canvasColor: Colors.transparent,
        ),
      home: MyHomePage(),
    );
  } 
}

class MyHomePage extends StatefulWidget{

  @override
  HomePageS createState()=> HomePageS();
}

class HomePageS extends State<MyHomePage>{

  @override
  Widget build(BuildContext context){

    return Scaffold(
      body: Container(
        color: Colors.white,
        child: Center(
          child: FlatButton(
            child: Text("Show BottomSheet"),
            onPressed: () async{
              showModalBottomSheet(
                context: context,
                builder: (BuildContext context){
                  return ClipRRect(
                    borderRadius: BorderRadius.only(topLeft: Radius.circular(20.0), topRight: Radius.circular(20.0)),
                    child: Container(
                      color: Colors.white,
                      child: Column(
                        children: [
                          ListTile(
                            leading: Material( 
                              color: Colors.transparent,
                              child: InkWell(
                                onTap: (){
                                  Navigator.of(context).pop();
                                },
                                child: Icon(Icons.arrow_back) // the arrow back icon
                                ),
                              ),                          
                            title: Center(
                              child: Text("My Title") // Your desired title
                              )
                            ),
                        ]
                        )
                      )
                    );
                }
              );
            }
          )
        )
      )
    );
  }
}

以下是输出：

如果您不想使用InkWell小部件，则可以使用IconButton小部件，如下所示：

...

ListTile(
    leading: IconButton(
        icon: Icon(Icons.arrow_back),
        onPressed: (){
            Navigator.of(context).pop();
        }                  
    ),                      
    title: Center(
        child: Text("My Title")
        )
    ),
...

但是，如果您注意到，标题文字并没有真正居中。在这种情况下，我们可以将ListTile小部件替换为Stack小部件，然后执行以下操作：

child: Column(
    children: [
        Stack(
            children: [
                Container(
                    width: double.infinity,
                    height: 56.0,
                    child: Center(
                        child: Text("My Title") // Your desired title
                        ),
                    ),

                Positioned(
                    left: 0.0,
                    top: 0.0,
                    child: IconButton(
                        icon: Icon(Icons.arrow_back), // Your desired icon
                        onPressed: (){
                            Navigator.of(context).pop();
                        }
                    )
                )
            ]
        ),
    ]
)

...

这是输出：

但是如果标题文字很长会怎样？肯定会像这样：

丑陋吧？我们可以看到我们的Text小部件与IconButton小部件重叠。为了避免这种情况，我们可以将“行”小部件替换为“堆栈”小部件。

这是代码：

...

child: Column(
    children: [
        Row( // A Row widget
            mainAxisAlignment: MainAxisAlignment.spaceBetween, // Free space will be equally divided and will be placed between the children.
            children: [

                IconButton( // A normal IconButton
                    icon: Icon(Icons.arrow_back),
                    onPressed: (){
                        Navigator.of(context).pop();
                    }
                ),

                Flexible( // A Flexible widget that will make its child flexible
                    child: Text(
                        "My Title is very very very very very very very long", // A very long text
                        overflow: TextOverflow.ellipsis, // handles overflowing of text
                    ),
                ),


                Opacity( // A Opacity widget
                    opacity: 0.0, // setting opacity to zero will make its child invisible
                    child: IconButton(
                        icon: Icon(Icons.clear), // some random icon
                        onPressed: null, // making the IconButton disabled
                    )
                ),

            ]
        ),
    ]
)

输出如下：

这（如果标题不长）：

Answer 2

我想我有天真的解决方案，但这对我来说非常有效。你也可以试试。

showModalBottomSheet(
        barrierColor: Colors.transparent,
        enableDrag: true,
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.vertical(top: Radius.circular(20))),
        context: context,
        builder:(context){

 return Padding(
            padding: const EdgeInsets.only(left: 8.0, right: 8.0, bottom: 8.0),
            child: Stack(children: [
              Padding(
                padding: const EdgeInsets.only(top: 65),
                child: SingleChildScrollView(
                  child:<<Scrollable Wdgets>>,
                ),
              ),
              Card(
                elevation: 3,
                color: Colors.grey[850],
                child: ListTile(
                  leading: Text("YOUR TITLE",
                      style: TextStyle(
                          color: Colors.white,
                          fontSize: 20,
                          fontWeight: FontWeight.w500)),
                  trailing: GestureDetector(
                    onTap: () {
                      Navigator.pop(context);
                    },
                    child: Icon(
                      Icons.close,
                      color: Colors.white,
                      size: 20,
                    ),
                  ),
                ),
              ),
            ]),
          );}

Flutter如何设置标题以显示模态底页？

2 个答案: