Question

我在Flutter中有一个永久的底部工作表，当前位于图标onPressed(){}属性中。

我想单独将这个持久的底页移到一个新类上，但是我似乎无法使其正常工作。我仍然不熟悉，无法弄清楚如何为持久底部栏构建结构。

我目前已经尝试了以下方法，但是当我运行代码时，会抛出异常。

main.dart

@override
Widget build(BuildContext context) {
return Scaffold(
  key: _scaffoldKey,
  appBar: AppBar(
    title: Text('Test App'),
    actions: <Widget>[
      IconButton(
        icon: Icon(Icons.open_in_new),
        onPressed: (){
          ShowBottomSheet(context);
        },
      )
    ],
  ),

bottom_modal_sheet.dart

final GlobalKey<ScaffoldState> _scaffoldKey = new 
GlobalKey<ScaffoldState>();

void ShowBottomSheet(BuildContext context) {
  _scaffoldKey.currentState.showBottomSheet<Null>((BuildContext context) 
{
return new Container(
  width: double.infinity,
  child: new Column(
    mainAxisSize: MainAxisSize.min,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Padding(
        padding: EdgeInsets.only(left: 24.0, top: 16.0),
        child: Text('Site Location',
          style: TextStyle(fontSize: 24.0, color: Color(0xFF1181A1), fontWeight: FontWeight.bold,),
        ),
      ),
      Padding(
        padding: EdgeInsets.only(left: 24.0, top: 16.0),
        child: Text('11 Carr Road, Three Kings, Auckland 1042',
          textAlign: TextAlign.left,
          style: TextStyle(fontSize: 16.0, color: Color(0xFF8596AC)),
        ),
      ),
      Padding(
        padding: EdgeInsets.only(left: 24.0, top: 24.0, right: 24.0, bottom: 16.0),
        child: RasiedGradientButton(
          child: Text('Set Location', style: TextStyle(fontSize: 24.0, fontWeight: FontWeight.bold, color: Colors.white)),
          gradient: LinearGradient(
            colors: <Color>[Color(0xFFFCCF58), Color(0xFFFEAA00)]
          ),
          onPressed: (){
            print('button clicked');
          },
        )  
      ),
    ],
));
  });
}

我遇到了错误：

I/flutter (19024): ══╡ EXCEPTION CAUGHT BY GESTURE 
╞═══════════════════════════════════════════════════════════════════
I/flutter (19024): The following NoSuchMethodError was thrown while 
handling a gesture:
I/flutter (19024): The method 'showBottomSheet' was called on null.
I/flutter (19024): Receiver: null
I/flutter (19024): Tried calling: showBottomSheet<Null>(Closure: 
(BuildContext) => Container)
I/flutter (19024):

Answer 1

您只需要在要显示底页的屏幕小部件中调用showBottomSheet，然后返回自定义底页的小部件即可。该代码段显示了如何执行此操作。阅读源注释。

// our Screen widget class
class MyScreen extends StatefulWidget {
  @override
  _MyScreenScreenState createState() => _MyScreenScreenState();
}

class _MyScreenState extends State<MyScreenScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
        title: Text('Test App'),
      actions: <Widget>[
        IconButton( icon: Icon(Icons.open_in_new),
        onPressed: (){
          _showMyBottomSheet();
        },
        )
      ],
        ),
    );
  }

  void _showMyBottomSheet(){
    // the context of the bottomSheet will be this widget
    //the context here is where you want to showthe bottom sheet
    showBottomSheet(context: context,
        builder: (BuildContext context){ 
          return MyBottomSheetLayout(); // returns your BottomSheet widget
        }
    );
  }
}

//your bottom sheet widget class
//you cant put your things here, like buttons, callbacks and layout
class MyBottomSheetLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(); // return your bottomSheetLayout
  }
}

Flutter-从另一个类调用持久性底层表

1 个答案: