Flutter 前端页面到页面设计
Posted
技术标签:
【中文标题】Flutter 前端页面到页面设计【英文标题】:Flutter front-end page onto page design 【发布时间】:2022-01-18 02:04:36 【问题描述】:我有一个前端设计问题:例如下面的设计,当我想在我的主页中打开一个新页面时,我想这样显示它。我现有页面上的新页面(背景模糊)。 Flutter 中有什么简单的方法可以解决这个问题吗?提前致谢。
【问题讨论】:
你可以试试对话 【参考方案1】:这样试试
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget
const MyApp(Key? key) : super(key: key);
static const String _title = 'Flutter Code Sample';
@override
Widget build(BuildContext context)
return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: const Text(_title)),
body: const MyStatelessWidget(),
),
);
class MyStatelessWidget extends StatelessWidget
const MyStatelessWidget(Key? key) : super(key: key);
@override
Widget build(BuildContext context)
return Center(
child: ElevatedButton(
child: const Text('showModalBottomSheet'),
onPressed: ()
showModalBottomSheet<void>(
context: context,
builder: (BuildContext context)
return Container(
height: 200,
color: Colors.amber,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const Text('Modal BottomSheet'),
ElevatedButton(
child: const Text('Close BottomSheet'),
onPressed: () => Navigator.pop(context),
)
],
),
),
);
,
);
,
),
);
从这里得到它:https://api.flutter.dev/flutter/material/showModalBottomSheet.html
【讨论】:
以上是关于Flutter 前端页面到页面设计的主要内容,如果未能解决你的问题,请参考以下文章
网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
文件存储-搜索导航栏-搜索接口-搜索页面-支付宝支付介绍-支付宝二次封装-订单表设计-下单接口-前端支付页面-支付成功回调