Flutter 学习笔记（七） 流布局 wrap组件 / Button 组件 / BottomNavigationBar 组件

Button 组件

Button 分为三类： TextButton ， ElevatedButton ， OutlinedButton ；效果如下图所示：

class MyButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        TextButton(
          style: TextButton.styleFrom(
            textStyle: TextStyle(fontSize: 20),
          ),
          onPressed: () {
            print("h");
          },
          child: Text('TextButton'),
        ),
        ElevatedButton(
          onPressed: () {},
          child: const Text('ElevatedButton'),
        ),
        OutlinedButton(
          onPressed: () {},
          child: const Text('OutlinedButton'),
        )
      ],
    );
  }
}

设置 ElevatedButton 样式

const ButtonStyle({
  this.textStyle, //字体
  this.backgroundColor, //背景色
  this.foregroundColor, //前景色
  this.overlayColor, // 高亮色，按钮处于focused, hovered, or pressed时的颜色
  this.shadowColor, // 阴影颜色
  this.elevation, // 阴影值
  this.padding, // padding
  this.minimumSize, //最小尺寸
  this.side, //边框
  this.shape, //形状
  this.mouseCursor, //鼠标指针的光标进入或悬停在此按钮的[InkWell]上时。
  this.visualDensity, // 按钮布局的紧凑程度
  this.tapTargetSize, // 响应触摸的区域
  this.animationDuration, //[shape]和[elevation]的动画更改的持续时间。
  this.enableFeedback, // 检测到的手势是否应提供声音和/或触觉反馈。例如，在Android上，点击会产生咔哒声，启用反馈后，长按会产生短暂的振动。通常，组件默认值为true。
});

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MyButton("Hello");
  }
}

class MyButton extends StatelessWidget {
  String text;
  MyButton(this.text);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        ElevatedButton(
          style: ButtonStyle(
            elevation: MaterialStateProperty.all(0),
            backgroundColor: MaterialStateProperty.all(Color(0xffFCB605)),
            shape: MaterialStateProperty.all(
                RoundedRectangleBorder(
                   borderRadius: BorderRadius.circular(35)
                )
             ),
          ),
          onPressed: () {},
          child: Text(this.text),
        )
      ],
    );
  }
}

参考：api.flutter-io.cn/flutter/mat…

Wrap 组件

属性：

属性	说明
direction	主轴的方向，默认水平
alignment	主轴的对其方式
spacing	主轴方向上的间距
textDirection	文本方向
verticalDirection	run 的对齐方式。run 可以理解为新的行或者 列，如果是水平方向布局的话，run 可以理解 为新的一行
runSpacing	run 的间距

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Wrap(
        spacing: 10,
        runSpacing: 10,
        alignment: WrapAlignment.spaceAround,
        // runAlignment: WrapAlignment.spaceAround,
        children: <Widget>[
          MyButton("Hello"),
          MyButton("Hello"),
          MyButton("Hello"),
          MyButton("Hello"),
          MyButton("Hello"),
          MyButton("Hello"),
          MyButton("Hello"),
          MyButton("Hello"),
        ]);
  }
}

class MyButton extends StatelessWidget {
  String text;
  MyButton(this.text);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        ElevatedButton(
          style: ButtonStyle(
            elevation: MaterialStateProperty.all(2),
            backgroundColor: MaterialStateProperty.all(Color(0xffFCB603)),
            shape: MaterialStateProperty.all(
                RoundedRectangleBorder(borderRadius: BorderRadius.circular(5))),
          ),
          onPressed: () {},
          child: Text(this.text),
        )
      ],
    );
  }
}

BottomNavigationBar 组件

BottomNavigationBar 是底部导航条，可以让我们定义底部 Tab 切换，bottomNavigationBar 是 Scaffold 组件的参数。

属性：

属性	说明
items	List 底部导航 条按钮集合
iconSize	icon
currentIndex	默认选中第几个
onTap	选中变化回调函数
fixedColor	选中的颜色
type	BottomNavigationBarType.fixed / BottomNavigationBarType.shifting

完成案例点击 footer 的 tabs 进行组件的切换

//- tabs 组件的代码，需要把 tabs 组件的引入到 main.dart 文件中

import 'package:flutter/material.dart';
import 'home.dart'; //- 定义home页面
import 'classfiy.dart'; //- 定义分类页面
import 'setting.dart'; //- 定义设置页面

class Tabs extends StatefulWidget {
  Tabs({Key? key}) : super(key: key);

  @override
  _TabsState createState() => _TabsState();
}

class _TabsState extends State<Tabs> {
  int _currentIndex = 0;
  List pageList = [
    HomePage(),
    Classify(),
    Setting(),
  ];
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(title: Text("Hello Demo")),
            body: pageList[_currentIndex],
            bottomNavigationBar: BottomNavigationBar(
              currentIndex: _currentIndex,
              onTap: (int index) {
                setState(() {
                  this._currentIndex = index;
                });
              },
              fixedColor: Colors.green,
              // type: BottomNavigationBarType.fixed,
              items: [
                BottomNavigationBarItem(label: "首页", icon: Icon(Icons.home)),
                BottomNavigationBarItem(label: "分类", icon: Icon(Icons.category)),
                BottomNavigationBarItem( label: "设置", icon: Icon(Icons.settings)),
              ],
            )));
  }
}