Flutter布局错误:在选项卡式内容中使用Web视图

Question

我是flutter的新手，观看了两个教程，一个是关于创建选项卡式应用程序的，另一个是有关webview的。不幸的是，我无法让他们一起工作。我得到一个布局错误。

这是我的代码：

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: DefaultTabController(
length: choices.length,
child: Scaffold(
appBar: AppBar(
title: const Text('Hydra Sense Control'),
bottom: TabBar(
isScrollable: true,
tabs: choices.map<Widget>((Choice choice) {
return Tab(
text: choice.title,
icon: Icon(choice.icon),
);
}).toList(),
),
),
body: TabBarView(
children: choices.map((Choice choice) {
return Padding(
padding: const EdgeInsets.all(20.0),
child: ChoicePage(
choice: choice,
),
);
}).toList(),
),
),
),
);
}
}
class Choice {
final String title;
final IconData icon;
final String link;
const Choice({this.title, this.icon, this.link});
}
const List<Choice> choices = <Choice>[
Choice(
title: 'DuetWebControl',
icon: Icons.settings,
link: 'https://google.com'),
Choice(title: 'Cameras', icon: Icons.videocam, link: 'https://yahoo.com'),
Choice(
title: 'Thingiverse',
icon: Icons.cloud_download,
link: 'https://thingiverse.com'),
Choice(
title: 'HevORT Forums',
icon: Icons.description,
link: 'https://forums.hevort.com'),
Choice(title: 'About Hydra', icon: Icons.info, link: 'https://youtube.com'),
];
class ChoicePage extends StatelessWidget {
const ChoicePage({Key key, this.choice}) : super(key: key);
final Choice choice;
@override
Widget build(BuildContext context) {
final TextStyle textStyle = Theme.of(context).textTheme.headline4;
return Card(
color: Colors.white,
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Icon(
choice.icon,
size: 150.0,
color: textStyle.color,
),
Text(
choice.title,
style: textStyle,
),
WebView(
initialUrl: choice.link,
javascriptMode: JavascriptMode.unrestricted)
],
),
),
);
}
}

此外，我想添加刷新页面或像在ios中一样来回切换的功能。向左滑动可返回，向右滑动可向前，向下滑动可刷新。

只是一个小应用程序。

Answer 1

为了防止该错误，您可以简单地将WebView包装在扩展的小部件中，如下所示：

Expanded(
child: WebView(
initialUrl: choice.link,
javascriptMode: JavascriptMode.unrestricted),
)