flutter:代码存储&基本组件 (五)

简介: 本文档介绍了Flutter中的一些基本组件和代码示例,包括代码存储、基本组件如AppBar的简单使用、可滑动切换的标签栏、TextField的多种用法(如简单使用、登录页面、文本控制器的监听与使用、修饰等),以及如何实现点击空白区域隐藏键盘等功能。通过这些示例,开发者可以快速掌握在Flutter应用中实现常见UI元素的方法。

前言

在当今的移动应用开发领域,Flutter 作为一个领先的跨平台开发框架,以其高效和优雅的设计赢得了广泛的关注与应用。在 Flutter 中,开发者可以利用丰富的内置组件迅速构建出引人注目的用户界面。本文档将介绍 Flutter 中的一些基本组件和代码示例,帮助开发者更好地理解如何在应用中实现常见的 UI 元素

代码存储

跳转

import 'dart:js';
import 'package:flutter/material.dart';
class myApp2 extends StatelessWidget{
  const myApp2({super.key});
  @override
  Widget build(BuildContext context) {
  return MaterialApp(
    routes:{
      "/":(BuildContext context) => Example202A(),
      "/second":(BuildContext context)=>Example202B(),
    }
  );
  }
}
class Example202A extends StatefulWidget{
  const Example202A({super.key});
  @override
  State<StatefulWidget> createState() {
        return _ExampleAState();
  }
}
class _ExampleAState extends State<Example202A>{
  String result="";
  @override
  Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('A page'),
        ),
        body:Column(
          children: [
            ElevatedButton(onPressed: ()=>{openBpage()}, child: Text('open B page')),
            ElevatedButton(onPressed: ()=>{openBparams()}, child: Text('open B page and get the B params')),
            Container(child: Text('the B page params is:$result'),)
          ],
        ) ,
      );
  }
}
class Example202B extends StatefulWidget {
  const Example202B({super.key});
  @override
  State<StatefulWidget> createState() {
  return _ExampleBState();
  }
}
class _ExampleBState extends State<Example202B>{
        String _msg="";
        @override
        void initState(){
          super.initState();
        @override
    void didChangeDependencies(){
          super.didChangeDependencies();
          bool isFirst=ModalRoute.of(context as BuildContext)!.isFirst;
          bool isCurrent=ModalRoute.of(context as BuildContext)!.isCurrent;
          bool isActive=ModalRoute.of(context as BuildContext)!.isActive;
          if(isActive){
            RouteSettings routeSettings=ModalRoute.of(context as BuildContext)!.settings;
            Map<String,String>?arguments=routeSettings.arguments as Map<String, String>?;
            _msg=arguments.toString();
          }
        };
  }
  @override
  Widget build(BuildContext context) {
          return Scaffold(
            appBar: AppBar(title: Text('B page'),),
            body: Column(
              children: [
      ElevatedButton(onPressed: ()=>{closeBpage()}, child:Text('close the current page')),
        SizedBox(height: 20),
                Text('the msg is :$_msg')
              ],
            ),
          );
  }
}
//open b
void openBpage(){
  Map<String,String>map=new Map();
  map["name"]="youren";
// 跳转第二个页面参数
Navigator.of(context as BuildContext).pushNamed("/second",arguments: map);
}
//open b and get params
void openBparams(){
  Map<String,String>map=new Map();
  map["name"]="youren";
  Navigator.of(context as BuildContext).pushNamed("/second",arguments: map).then((value){
    if(value != null){
      Map<String,String>?resultMap=value as Map<String, String>?;
      print("the result is ${resultMap?['result']}");
  //    setState((){
  //   result=resultMap.toString();
  // });
    }
  });
}
void closeBpage(){
  Map<String,String>resultMap=new Map();
  resultMap["result"]="ABCDE";
  Navigator.of(context as BuildContext).pop(resultMap);
}
void main(){
  runApp(const myApp2());
}


基本组件

head

Appbar

简单使用

return Scaffold(
          //leading  表示左侧     actions  表示右侧
          appBar: AppBar(
          //  左侧按钮
            leading: IconButton(icon: const Icon(Icons.close),onPressed: (){},),
          //  中间显示的内容
            title:const Text( "i am the title"),
          //  title  居中
            centerTitle: true,
            actions: [
               IconButton(icon: const Icon(Icons.share),onPressed: (){},),
               IconButton(icon: const Icon(Icons.message),onPressed: (){},),
               IconButton(icon: const Icon(Icons.more_horiz_outlined),onPressed: (){},),
            ],
          ),
      );

实现可滑动切换的标签栏

import 'package:flutter/material.dart';
class Echo extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
   return _Echo();
  }
}
class _Echo extends State <Echo> with SingleTickerProviderStateMixin{
  //  控制器
  late TabController _tabController;
  // tab 集合
  List<Tab> tabs= <Tab>[];
  //主体页面集合
  List<Widget> bodyList = [];
  @override
  void initState(){
    super.initState();
  //    初始化  Tab 如新闻咨询类 App 分类
    tabs=<Tab>[
      Tab(text: "Tab0",),
      Tab(text: "Tab1",),
      Tab(text: "Tab3",),
      Tab(text: "Tab4",),
    ];
  // 创建模拟页面  如 app分类  列表
    for(int i= 0;i<tabs.length;i++){
      bodyList.add(tabs(i));
    }
  //  参数  1  initialIndex  初始选中几个
  //  2 length  标签的个数
  //  3   vsync   动画同步依赖
    _tabController=TabController(length: tabs.length, vsync: this,initialIndex: 0);
  }
  @override
    Widget build(BuildContext context){
      return Scaffold(
          //leading  表示左侧     actions  表示右侧
          appBar: AppBar(
          //  左侧按钮
            leading: IconButton(icon: const Icon(Icons.close),onPressed: (){},),
          //  中间显示的内容
            title:TabBar(
             controller: _tabController, tabs: tabs,isScrollable: false,
            ),
          //  title  居中
          centerTitle: true,
          ),
        body:TabBarView(
          controller: _tabController,
          children: bodyList,
        )
      );
    }
  }
void main(List<String> args){
runApp(MaterialApp(
  title: 'hello',
  home: Echo(),
));
}


TextField

简单使用

所有的参数

加边框

属性

Widget buildTextField(){
  return TextField(
    //  type
    keyboardType: TextInputType.text,
    // when you get in the page ,it will focus this
    autofocus: true,
    //  secret   can't see it
    // obscureText: true,
    maxLength: 11,
    //  InputDecoration
    decoration: InputDecoration(
      labelText: "input your number",
      hintStyle: TextStyle(
        color: Colors.grey,fontSize: 12.0
      ),
      //   border
      border: OutlineInputBorder(
        borderRadius: BorderRadius.all(Radius.circular(40))
      )
    ),
  );
}
prefixIcon
suffixIcon

登录页面

import 'package:flutter/material.dart';
import './test.dart';
class test extends StatefulWidget{
  const test({Key? key}) : super(key: key);
  @override
  State<StatefulWidget> createState() =>_test();
}
class _test extends State<test> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar:AppBar(title: Text('login'),),
        body:Container(
          margin: const EdgeInsets.all(30.0),
          child:  Column(
            children: [
              const TextField(
                decoration: InputDecoration(
                    labelText: 'username',
                    border: OutlineInputBorder(
                        borderRadius: BorderRadius.all(Radius.circular(10))
                    )
                ),
              ),
              const SizedBox(height: 20),
              const TextField(
                obscureText: true,
                maxLines: 1,
                decoration: InputDecoration(
                    labelText: 'password',
                    border: OutlineInputBorder(
                        borderRadius: BorderRadius.all(Radius.circular(10))
                    )
                ),
              ),
              const SizedBox(height: 20),
              ElevatedButton(child:const Text('login',),onPressed: (){
                // Navigator.of(context).pushNamed( "successful");
              Navigator.push(context, MaterialPageRoute(builder: (context){
                return Successful();
              }));
              },),
            ],
          ),
        )
    );
  }
}
class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "hello",
      initialRoute: "/",
      routes: {
        "/":(context)=>test(),
        "successful":(context)=>Successful(),
      },
    );
  }
}
void  main(){
  runApp(const MyApp());
}


文本控制器

监听

在当前的widget下
  FocusNode focusNode = new FocusNode();
                 focusNode: focusNode,
@override
  void initState(){
    super.initState();
    // addListener();
    focusNode.addListener((){
      if(focusNode.hasFocus){
        print("get focus");
      }else{
        print("lost focus");
      }
    });
  }
//页面销毁
  @override
  void dispose(){
    super.dispose();
    focusNode.dispose();
  }

点击空白隐藏键盘

return GestureDetector(
      onTap: (){
        SystemChannels.textInput.invokeMethod('TextInput.hide');
      },
    );

TextEditingControll

TextEditingController _usernameController= new TextEditingController();
      controller: _usernameController,
String res= _usernameController.text

使用

import 'package:flutter/material.dart';
class test01 extends StatefulWidget {
  const test01({Key? key}) : super(key: key);
  @override
  State<test01> createState() => _test01State();
}
class _test01State extends State<test01> {
  FocusNode focusNode = new FocusNode();
  // focusNode: focusNode,
  TextEditingController _usernameController= new TextEditingController();
  @override
  void initState() {
    super.initState();
    // addListener();
    focusNode.addListener(() {
      if (focusNode.hasFocus) {
        print("get focus");
      } else {
        print("lost focus");
      }
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("title"),),
      body: Center(
        child: Column(
          children: [
            TextField(
              focusNode: focusNode,
              controller: _usernameController,
              obscureText: true,
              maxLines: 1,
              decoration: InputDecoration(
                  labelText: 'password',
                  border: OutlineInputBorder(
                      borderRadius: BorderRadius.all(Radius.circular(10)))),
            ),
            ElevatedButton(onPressed: (){
              String res= _usernameController.text;
              print(res);
            }, child: Text("click me"))
          ],
        ),
      ),
    );
  }
}

修饰

加边框

borderRadious:BorderRadius.all(Radius.circular(10)

return TextField(
       decoration: InputDecoration(
         border: OutlineInputBorder(
           borderRadius: BorderRadius.all(Radius.circular(10))
         )
       ),
    );
给提示信息
        labelText: "input something",
       hintText: "input something2",
// 密码框显示
obscureText: true,
相关文章
|
3月前
|
传感器 缓存 监控
Stream 组件在 Flutter 中的应用场景有哪些?
Stream 组件在 Flutter 中的应用场景有哪些?
184 58
|
3月前
|
UED 开发者
Flutter|常用数据通信组件
Flutter|常用数据通信组件
109 49
|
1月前
Flutter 自定义组件继承与调用的高级使用方式
本文深入探讨了 Flutter 中自定义组件的高级使用方式,包括创建基本自定义组件、继承现有组件、使用 Mixins 和组合模式等。通过这些方法,您可以构建灵活、可重用且易于维护的 UI 组件,从而提升开发效率和代码质量。
126 1
|
1月前
|
开发工具 UED
Flutter&鸿蒙next中封装一个输入框组件
本文介绍了如何创建一个简单的Flutter播客应用。首先,通过`flutter create`命令创建项目;接着,在`lib`目录下封装一个自定义输入框组件`CustomInput`;然后,在主应用文件`main.dart`中使用该输入框组件,实现简单的UI布局和功能;最后,通过`flutter run`启动应用。本文还提供了后续扩展建议,如状态管理、网络请求和UI优化。
101 1
|
3月前
|
开发工具
Flutter-AnimatedWidget组件源码解析
Flutter-AnimatedWidget组件源码解析
179 60
|
1月前
|
Dart UED
Flutter用户交互组件
Flutter用户交互组件
25 2
|
1月前
|
开发工具
Flutter&鸿蒙next中封装一个列表组件
Flutter&鸿蒙next中封装一个列表组件
43 0
|
3月前
|
开发者
Flutter|常用数据通信组件
Flutter|常用数据通信组件
|
2月前
|
IDE 调度 开发工具
鸿蒙Flutter实战:08-如何调试代码
本文介绍了鸿蒙Flutter项目的开发环境搭建、配置、日志查看及调试方法。首先按照指南搭建开发环境,安装IDE插件;接着配置vscode的launch.json文件;通过IDE调试控制台或命令行查看日志;提供两种调试Flutter的方式,包括IDE直接运行和使用DevEco;最后介绍ArkTs和Webview的调试方法。
61 0
|
3月前
Stream 组件在 Flutter 中的具体使用方法是什么?
Stream 组件在 Flutter 中的具体使用方法是什么?