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

Question

是否可以在此 showModalBottomSheet 上设置 title 和导航返回按钮？

我期待这样的事情......

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 小部件重叠。为避免这种情况，我们可以将 Stack 小部件替换为 Row 小部件。

代码如下:

...

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
                    )
                ),

            ]
        ),
    ]
)

输出会是这样的:

还有这个(如果标题不长的话):