Flutter笔记-基础组件

图片和Icon

加载网络图片以及本地图片

 Image(
              image: NetworkImage(
                  "https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB12IU4R.img?w=80&h=80&m=4&q=60"),
              width: 100.0,
            ),
            Image(image: AssetImage("graphics/ic_launcher.png"),
              width: 100.0,
              height: 100.0,
            )

color和colorBlendMode 进行颜色混合处理

 Image(
              image: AssetImage("graphics/ic_launcher.png"),
              width: 100.0,
              height: 100.0,
              color: Colors.blue,
              colorBlendMode: BlendMode.difference,
            )

整体的例子：

加载网络图片

import 'package:flutter/cupertino.dart';

class ImageAndIconRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var assetImage = AssetImage("graphics/ic_launcher.png");
    return SingleChildScrollView(
      child: Column(
          children: <Image>[
        Image(
          image: assetImage,
          width: 100,
          height: 100,
          fit: BoxFit.fill,
        ),
        Image(
          image: assetImage,
          width: 100,
          height: 100,
          fit: BoxFit.contain,
        ),
        Image(
          image: assetImage,
          width: 100,
          height: 100,
          fit: BoxFit.cover,
        ),
        Image(
          image: assetImage,
          width: 100,
          height: 100,
          fit: BoxFit.fitWidth,
        ),
        Image(
          image: assetImage,
          width: 100,
          height: 100,
          fit: BoxFit.fitHeight,
        ),
        Image(
          image: assetImage,
          width: 100,
          height: 100,
          fit: BoxFit.none,
        ),
      ].map((e) {
        return Row(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.all(16.0),
              child: SizedBox(
                width: 100,
                child: e,
              ),
            ),
            Text(e.fit.toString())
          ],
        );
      }).toList()),
    );
  }
}

单选开关和复选框

switch和checkbox,继承StateLessWidget

点击switch和checkbox会触发onchange回调

import 'package:flutter/material.dart';
// StatefulWidget 维护状态需要继承这个
class SwitchAndCheckboxRoute extends StatefulWidget{
  const SwitchAndCheckboxRoute({super.key});

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

class SwitchAndCheckboxRouteSate extends State<SwitchAndCheckboxRoute>{
  bool switchSelected = true;
  bool checkboxSelected = true;
  @override
  Widget build(BuildContext context) {
  return Column(
    children: <Widget>[
      Switch(
        value:switchSelected, onChanged: (bool value) {
          setState(() {
            switchSelected = value;
          });
      },),
      Checkbox(value: checkboxSelected,
        activeColor: Colors.red,
        onChanged: (bool? value) {
        setState(() {
          checkboxSelected = value!;
        });
      },
      )
    ],
  );
  }
}

输入框以及表单

输入框组件TextField

1. TextEditingController 编辑框控制器，设置，获取，选择，监听文本改变事件。
2. FucusNode 是否占有键盘焦点。
3. InputDecoration TextField外观显示，提示文本，背景颜色，边框等。
4. KeyboardType 键盘输入类型

• text 文件输入键盘
• multiline 多行文本
• number 数字键盘
• phone 电话号码键盘
• datatime 日期输入键盘
• emailAddress 电子邮件
• url url输入键盘

输入框例子：

            Column(
              children: const <Widget>[
                TextField(
                  autofocus: true,
                  decoration: InputDecoration(
                    labelText: "用户名",
                    hintText: "请输入用户名",
                    prefixIcon: Icon(Icons.person)
                  ),
                ),
                TextField(
                  autofocus: true,
                  decoration: InputDecoration(
                      labelText: "密码",
                      hintText: "请输入密码",
                      prefixIcon: Icon(Icons.lock)
                  ),
                  obscureText: true,
                )

              ],
            )

效果

控制焦点

import 'package:flutter/material.dart';

class FocusTestRoute extends StatefulWidget{
  const FocusTestRoute({super.key});

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

class FocusTestRouteState extends State<FocusTestRoute>{
  // FocusNode 控制焦点用
  FocusNode focusNode1 = FocusNode();
  FocusNode focusNode2 = FocusNode();
  // 移动焦点，设置默认焦点用
  late FocusScopeNode focusScopeNode;

  @override
  Widget build(BuildContext context) {
   return  Padding(
     padding: const EdgeInsets.all(16.0),
  child: Column(
      children: <Widget>[
        TextField(
          autofocus: true,
          focusNode: focusNode1,
          decoration: const InputDecoration(
            labelText: "input1"
          ),
        ),
        TextField(
          focusNode: focusNode2,
          decoration: const InputDecoration(
            labelText: "input2"
          ),
        ),
        Builder(builder: (ctx){
          return Column(
            children: <Widget>[
              TextButton(
                child: const Text("移动焦点"),
                onPressed: (){
                if(null==focusScopeNode){
                  focusScopeNode = FocusScope.of(context);
                }else{
                  // 焦点移动到第二个TextField
                  focusScopeNode.requestFocus(focusNode2);
                }
                },
              ),
              TextButton(
                child: const Text("隐藏键盘"),
                onPressed: (){
                  focusNode1.unfocus();
                  focusNode2.unfocus();
                },
              )
            ],
          );
        })
      ],
  ),
   );
  }
}

进度条

LinearProgressIndicator 横向进度条

valueColor 进度条颜色

value 进度

 LinearProgressIndicator(
              backgroundColor: Colors.grey[200],
              valueColor: const AlwaysStoppedAnimation(Colors.blue),
            ),
            LinearProgressIndicator(
              backgroundColor: Colors.grey[200],
              valueColor: const AlwaysStoppedAnimation(Colors.blue),
              value: 0.5,
            )

圆形进度条

CircularProgressIndicator(
            backgroundColor: Colors.grey[200],
            valueColor: const AlwaysStoppedAnimation(Colors.blue),
            value: .5,
            )

指定进度条宽高SizedBox

SizedBox(
              height: 10,
              child: LinearProgressIndicator(
                backgroundColor: Colors.grey[200],
                valueColor: const AlwaysStoppedAnimation(Colors.blue),
              ),
            ),

10s由绿变红例子

import 'package:flutter/material.dart';

class ProgressRoute extends StatefulWidget {
  const ProgressRoute({super.key});

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

class ProgressRouteState extends State<ProgressRoute>
    with SingleTickerProviderStateMixin {
  late AnimationController animationController;

  @override
  initState() {
    animationController =
        AnimationController(vsync: this, duration: const Duration(seconds: 10));
    animationController.forward();
    animationController.addListener(() => setState(() {}));
    super.initState();
  }

  @override
  void dispose() {
    animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: <Widget>[
          Padding(padding: const EdgeInsets.all(16),
              child: LinearProgressIndicator(
                backgroundColor: Colors.grey[200],
                valueColor: ColorTween(begin: Colors.green, end: Colors.red).animate(animationController),
                value: animationController.value,
              )
          ),

        ],
      ),
    );
  }
}