webview组件

flutter的webview组件不止一种，我这里选择了官方组件webview_flutter。 几种webview组件的对比参考这里：juejin.cn/post/684490…

开始使用

1.第一步，导包 和任何一个 Flutter package 一样，我们需要在 pubspec.yml 中的 dependencies 下加入 webview_flutter 的 package

    dependencies:
        webview_flutter: ^0.3.10+4

然后在终端输入 Flutter package get ###2.创建该组件 引文件

    import 'package:webview_flutter/webview_flutter.dart;

2.组件的基本使用，先放个简单的链接试试

    WebView(
        initialUrl: url,
        javascriptMode: JavascriptMode.unrestricted,
      ),

3.不要忘了环境配置 在 IOS 模块的 Runner 中的 info.plist 文件中加入：

<key>io.flutter.embedded_views_preview</key>
<string>YES</string>

如果是https的链接还要加上：

<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>

自定义导航栏，包含搜索框

导航栏的设置位于AppBar,左侧返回按钮部分在leading里，其余部分在title里，这俩个属性可以当做正常的容器，往里面放组件就可以:

appBar: new AppBar(
//      centerTitle: true,
      title: TextFileWidget(),
      leading: GestureDetector(
          onTap: (){
            Navigator.of(context).pop();
          },
          child: Padding(
          padding: const EdgeInsets.only(
            left: 15.0,
            top: 17.0
          ),
          child: Text("返回"),
        ),
),

listview加一个随着滚动的headerview

不要用listview就好了，对于滚动组件相互嵌套的页面，可以使用CustomScrollView。

CustomScrollView(
        slivers: <Widget>[
          // 如果不是Sliver家族的Widget，需要使用SliverToBoxAdapter做层包裹
          SliverToBoxAdapter(    //这个是header
            child: Container(
              height: 150,
              color: Colors.green,
              child: Column(
              ）
          ),
                    
      
          // 当列表项高度固定时，使用 SliverFixedExtendList 比 SliverList 具有更高的性能
          SliverFixedExtentList(             //这个是listview
              delegate: SliverChildBuilderDelegate(_buildListItem, childCount: 30),
              itemExtent: 48.0
          )
        ],
),

几种横向平铺调整坐标的方法

1.佛系调整法，使用Row组件的MainAxisAlignment,系统自动铺开

Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                mainAxisSize: MainAxisSize.max,
                children: <Widget>[
                ]
)

2.Container组件或其他的一些容器组件，有padding属性的

Container(
                    height: 40,
                    width:window.physicalSize.width ,
                    padding:const EdgeInsets.only(
            left: 10.0,
            top: 10.0
          ),
)