当我在Flutter应用中切换应用栏时,我不希望重新加载Webview,但是我不知道该怎么办,对不起,我是初学者。
这是我录制的gif:
我在Google上进行了搜索,但没有找到与此相关的答案。
//index.dart
import 'package:flutter/material.dart';
import 'navigation_tab.dart';
import '../home/home_page.dart';
import '../market/market_page.dart';
import '../my/my_page.dart';
class Index extends StatefulWidget {
@override
_IndexState createState() => new _IndexState();
}
class _IndexState extends State<Index> with TickerProviderStateMixin {
int _currentIndex = 0;
List<NavigationTab> _navigationTabs;
List<StatefulWidget> _pageList;
StatefulWidget _currentPage;
@override
void initState() {
super.initState();
_navigationTabs = <NavigationTab>[
new NavigationTab(icon: new Icon(Icons.account_balance), title: new Text("home"), vsync: this),
new NavigationTab(icon: new Icon(Icons.local_mall), title: new Text("market"), vsync: this),
new NavigationTab(icon: new Icon(Icons.account_box), title: new Text("my"), vsync: this),
];
_pageList = <StatefulWidget>[
new HomePage(),
new MarketPage(),
new MyPage(),
];
_currentPage = _pageList[_currentIndex];
}
@override
Widget build(BuildContext context) {
return new Scaffold(
body: _currentPage,
bottomNavigationBar: new BottomNavigationBar(
items: _navigationTabs.map((tab) => tab.item).toList(),
currentIndex: _currentIndex,
fixedColor: Colors.blue,
type: BottomNavigationBarType.fixed,
onTap: (int index) {
setState(() {
_currentIndex = index;
_currentPage = _pageList[index];
});
},
),
);
}
}
//home_page.dart
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => new _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: PreferredSize(
child: new AppBar(
title: new Text("home"),
centerTitle: true,
),
preferredSize: Size.fromHeight(40)
),
body: new Center(
child: new Text("this is home page", style: TextStyle(fontSize: 36)),
),
);
}
}
//market_page.dart
import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
class MarketPage extends StatefulWidget {
@override
_MarketPageState createState() => new _MarketPageState();
}
class _MarketPageState extends State<MarketPage> {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: PreferredSize(
child: new AppBar(
title: new Text("market"),
centerTitle: true,
),
preferredSize: Size.fromHeight(40)
),
body: new WebviewScaffold(
url: "https://flutter.dev/",
withLocalStorage: true,
withJavascript: true
),
);
}
}
我想让Webview页面保持活动状态,例如vue,该怎么办?
答案 0 :(得分:2)
基本上,只要您打开MarketPage小部件,它就会重新构建。您可以使用Keep alive来实现所需的行为。
//market_page.dart
import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
class MarketPage extends StatefulWidget {
@override
_MarketPageState createState() => new _MarketPageState();
}
class _MarketPageState extends State<MarketPage> with AutomaticKeepAliveClientMixin{
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: PreferredSize(
child: new AppBar(
title: new Text("market"),
centerTitle: true,
),
preferredSize: Size.fromHeight(40)
),
body: new WebviewScaffold(
url: "https://flutter.dev/",
withLocalStorage: true,
withJavascript: true
),
);
}
@override
bool get wantKeepAlive => true;
}
更新-
这是一个使用AutomaticKeepAliveClientMixin
的示例。这对我来说很好。我使用的是Pageview和webview_flutter而不是flutter_webview_plugin。
main.dart
import 'package:flutter/material.dart';
import 'package:webview_project/pag1.dart';
import 'package:webview_project/page2.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _currentIndex = 0;
var controller = PageController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: PageView(
physics: NeverScrollableScrollPhysics(),
controller: controller,
children: <Widget>[
Page1(),
Page2(),
],
),
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')),
BottomNavigationBarItem(icon: Icon(Icons.web), title: Text('Web')),
],
currentIndex: _currentIndex,
onTap: (index) {
setState(() {
_currentIndex = index;
controller.jumpToPage(index);
});
},
),
);
}
}
page1.dart
import 'package:flutter/material.dart';
class Page1 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text('Page1'),
);
}
}
page2.dart
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
class Page2 extends StatefulWidget {
@override
_Page2State createState() => _Page2State();
}
class _Page2State extends State<Page2>
with AutomaticKeepAliveClientMixin<Page2> {
@override
Widget build(BuildContext context) {
return WebView(
initialUrl: 'https://www.flutter.dev/',
);
}
@override
bool get wantKeepAlive => true;
}