flutter:代码存储&基本组件 (五)-阿里云开发者社区

前言

在当今的移动应用开发领域，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,

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

前言

代码存储

基本组件

head

TextField

简单使用

登录页面

文本控制器

修饰

热门文章

最新文章

相关课程

相关电子书

相关实验场景