ios 如何使用“modal_bottom_sheet”将新视图推送到模式底部工作表中

3phpmpom 于 2023-11-19 发布在 iOS

关注(0)|答案(1)|浏览(123)

感谢您的阅读。我想做的是从库比蒂诺半模态底表导航到一个新的库比蒂诺半模态底表。
这是我用来创建库比蒂诺modal. modal_bottom_sheet 3.0.0-pre的包
我的目标是在modal表单中创建一个平滑的过渡，就像this一样，但只有一半是modal。
版本Flutter 3.16.0
我尝试了一些类似的东西，但它不会像我预期的那样工作。它创建了一个完整的页面AddProductView（），而不是一个底部模式。
我在主视图中尝试了（1）。

showCupertinoModalBottomSheet(
  expand: false,
  context: context,
  backgroundColor: Colors.transparent,
  builder: (context) {
    return Navigator(
      onGenerateRoute: (context) => MaterialPageRoute(
        builder: (context) => ShowMordal(),
      ),
    );
  },
);

字符串
我尝试过的（2）

Navigator.push(context, MaterialPageRoute(builder: (context) {
   return ShowMordal();
}));

型
还有，这是我的Myapp功能

Widget build(BuildContext context) {
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
  return MaterialApp(
  title: 'Flutter Demo',
  initialRoute: MainView.routeName,
  onGenerateRoute: (RouteSettings settings) {
    switch (settings.name) {
      case MainView.routeName:
        return MaterialWithModalsPageRoute(
          builder: (context) => const MainView(),
          settings: settings,
        );
    }
  },
);
}

型
如果有人能帮忙，谢谢。

ios

来源：https://stackoverflow.com/questions/77439514/how-to-push-new-views-inside-the-modal-bottom-sheet-using-modal-bottom-sheet

1条答案

按热度按时间

vnzz0bqm1#

你好试试这个，

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(platform: TargetPlatform.iOS),
      darkTheme: ThemeData.dark().copyWith(platform: TargetPlatform.iOS),
      onGenerateRoute: (RouteSettings settings) {
        return MaterialPageRoute(
          builder: (context) => Scaffold(
            body: CupertinoScaffold(
              body: Builder(
                builder: (context) => CupertinoPageScaffold(
                  navigationBar: const CupertinoNavigationBar(
                    transitionBetweenRoutes: false,
                    middle: Text(
                      'Normal Navigation Presentation',
                      style: TextStyle(
                        color: Colors.white,
                      ),
                    ),
                  ),
                  child: Center(
                    child: GestureDetector(
                      onTap: () =>
                          CupertinoScaffold.showCupertinoModalBottomSheet(
                        context: context,
                        backgroundColor: Theme.of(context).cardColor,
                        builder: (context) => const ModalWithNavigator(),
                      ),
                      child: Container(
                        decoration: BoxDecoration(
                          color: Colors.blue,
                          borderRadius: BorderRadius.circular(25),
                        ),
                        padding: const EdgeInsets.all(15),
                        child: const Text(
                          "Click This Button",
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 25,
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),
          settings: settings,
        );
      },
      debugShowCheckedModeBanner: false,
    );
  }
}

字符串
在这里，您应该使用导航器小部件进行内部导航;

class ModalWithNavigator extends StatelessWidget {
  const ModalWithNavigator({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext rootContext) {
    return Material(
      child: Navigator( // ATTENTION HERE
        onGenerateRoute: (_) => MaterialPageRoute(
          builder: (context2) => Builder(
            builder: (context) => CupertinoPageScaffold(
              navigationBar: const CupertinoNavigationBar(
                backgroundColor: Color.fromRGBO(33, 33, 33, 1.0),
                middle: Text(
                  'Modal Page',
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
              ),
              child: SafeArea(
                bottom: false,
                child: ListView(
                  shrinkWrap: true,
                  controller: ModalScrollController.of(context),
                  children: ListTile.divideTiles(
                    context: context,
                    tiles: List.generate(
                        100,
                        (index) => ListTile(
                              title: const Text('Click To Navigate'),
                              onTap: () {
                                Navigator.of(context).push(
                                  MaterialPageRoute(
                                    builder: (context) => CupertinoPageScaffold(
                                      navigationBar:
                                          const CupertinoNavigationBar(
                                        backgroundColor:
                                            Color.fromRGBO(33, 33, 33, 1.0),
                                        middle: Text(
                                          'New Page',
                                          style: TextStyle(
                                            color: Colors.white,
                                          ),
                                        ),
                                      ),
                                      child: Center(
                                        child: GestureDetector(
                                          onTap: () =>
                                              Navigator.of(rootContext).pop(),
                                          child: Container(
                                            decoration: BoxDecoration(
                                              color: Colors.red,
                                              borderRadius:
                                                  BorderRadius.circular(25),
                                            ),
                                            padding: const EdgeInsets.all(15),
                                            child: const Text(
                                              'Close Here',
                                              style: TextStyle(
                                                color: Colors.white,
                                                fontSize: 25,
                                              ),
                                            ),
                                          ),
                                        ),
                                      ),
                                    ),
                                  ),
                                );
                              },
                            )),
                  ).toList(),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

型

赞(0）回复(0）举报 2023-11-19

我来回答

ios 如何使用“modal_bottom_sheet”将新视图推送到模式底部工作表中

1条答案

相关问题

热门标签

最新问答