1_TextField(文本框)
import 'package:flutter/material.dart';void main() { runApp(MaterialApp( home: MyEditText(), ));}class MyEditText extends StatefulWidget { @override MyEditTextState createState() => MyEditTextState();}class MyEditTextState extends State
{ String results = ""; final TextEditingController controller = TextEditingController(); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Using EditText"), backgroundColor: Colors.red, ), body: Container( child: Center( child: Column( children:
[ TextField( decoration: InputDecoration(hintText: "Enter text here..."), onSubmitted: (String str) { setState(() { results = results + "\n" + str; }); }, ), Text(results) ], ), ), ), ); }}复制代码
1.1文本框获取值
import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Retrieve Text Input', home: MyForm(), ); }}// Define a Custom Form Widgetclass MyForm extends StatefulWidget { @override _MyFormState createState() => _MyFormState();}// Define a corresponding State class. This class will hold the data related to// our Form.class _MyFormState extends State
{ // Create a text controller. We will use it to retrieve the current value // of the TextField! final myController = TextEditingController(); @override void dispose() { // Clean up the controller when the Widget is disposed myController.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Retrieve Text Input'), ), body: Padding( padding: const EdgeInsets.all(16.0), child: TextField( controller: myController, ), ), floatingActionButton: FloatingActionButton( // When the user presses the button, show an alert dialog with the // text the user has typed into our text field. onPressed: () { return showDialog( context: context, builder: (context) { return AlertDialog( // Retrieve the text the user has typed in using our // TextEditingController content: Text(myController.text), ); }, ); }, tooltip: 'Show me the value!', child: Icon(Icons.text_fields), ), ); }}复制代码
2_TabBar(选项卡)
import 'package:flutter/material.dart';void main() { runApp(TabBarDemo());}class TabBarDemo extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: DefaultTabController( length: 3, child: Scaffold( appBar: AppBar( bottom: TabBar( tabs: [ Tab(icon: Icon(Icons.directions_car)), Tab(icon: Icon(Icons.directions_transit)), Tab(icon: Icon(Icons.directions_bike)), ], ), title: Text('Tabs Demo'), ), body: TabBarView( children: [ Icon(Icons.directions_car), Icon(Icons.directions_transit), Icon(Icons.directions_bike), ], ), ), ), ); }}复制代码
2.1_顶部选项卡
import 'package:flutter/material.dart';void main() { runApp(TabBarDemo());}class TabBarDemo extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: DefaultTabController( length: 3, child: Scaffold( appBar: AppBar( title: Material( color: Colors.blue, child: TabBar( tabs: [ Tab(icon: Icon(Icons.directions_car)), Tab(icon: Icon(Icons.directions_transit)), Tab(icon: Icon(Icons.directions_bike)), ], ), ), ), body: TabBarView( children: [ Icon(Icons.directions_car), Icon(Icons.directions_transit), Icon(Icons.directions_bike), ], ), ), ), ); }}复制代码
2.2_选项卡页面
import 'package:flutter/material.dart';void main() { runApp(TabBarDemo());}class TabBarDemo extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: DefaultTabController( length: 3, child: Scaffold( appBar: AppBar( title: Material( color: Colors.blue, child: TabBar( tabs: [ Tab(icon: Icon(Icons.directions_car)), Tab(icon: Icon(Icons.directions_transit)), Tab(icon: Icon(Icons.directions_bike)), ], ), ), ), body: TabBarView( children: [ Home1(), Home2(), Home3(), ], ), ), ), ); }}class Home1 extends StatelessWidget{ @override Widget build(BuildContext context) { return Scaffold( body: Center(child:Text('HOME1') ,), ); }}class Home2 extends StatelessWidget{ @override Widget build(BuildContext context) { return Scaffold( body: Center(child:Text('HOME2') ,), ); }}class Home3 extends StatelessWidget{ @override Widget build(BuildContext context) { return Scaffold( body: Center(child:Text('HOME3') ,), ); }}复制代码
3_bottomNavigationBar(底部导航栏)
import 'package:flutter/material.dart';void main() { runApp(MyApp());}class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Generated App', theme: ThemeData( primarySwatch: Colors.blue, primaryColor: const Color(0xFF2196f3), accentColor: const Color(0xFF2196f3), canvasColor: const Color(0xFFfafafa), ), home: MyHomePage(), ); }}class MyHomePage extends StatefulWidget { MyHomePage({Key key}) : super(key: key); @override _MyHomePageState createState() => _MyHomePageState();}class _MyHomePageState extends State
{ int index=0; List
pages=[ Container(color: Colors.deepOrange), Container(color: Colors.amber), Container(color: Colors.blue), Container(color: Colors.green), ]; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('App Name'), ), bottomNavigationBar: BottomNavigationBar( type: BottomNavigationBarType.fixed, onTap: (int idx){ setState(() { index=idx; }); }, items: [ BottomNavigationBarItem( icon: const Icon(Icons.access_alarm,color: Colors.black), title: Text('Title',style: TextStyle(color: Colors.black)), ), BottomNavigationBarItem( icon: const Icon(Icons.star,color: Colors.black), title: Text('Title',style: TextStyle(color: Colors.black)), ), BottomNavigationBarItem( icon: const Icon(Icons.pages,color: Colors.black), title: Text('Title',style: TextStyle(color: Colors.black)), ), BottomNavigationBarItem( icon: const Icon(Icons.adjust,color: Colors.black), title: Text('Title',style: TextStyle(color: Colors.black)), ), ] ), body:pages[index] , ); }}复制代码
3.1_底部导航页面
import 'package:flutter/material.dart';void main() { runApp(MyApp());}class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( primarySwatch: Colors.blue, primaryColor: const Color(0xFF2196f3), accentColor: const Color(0xFF2196f3), canvasColor: const Color(0xFFfafafa), ), home: MyHomePage(), ); }}class MyHomePage extends StatefulWidget { MyHomePage({Key key}) : super(key: key); @override _MyHomePageState createState() => _MyHomePageState();}class _MyHomePageState extends State
{ int index=0; List
pages=[ Home1(), Home2(), Home3(), Home4() ]; @override Widget build(BuildContext context) { return Scaffold( bottomNavigationBar: BottomNavigationBar( type: BottomNavigationBarType.fixed, currentIndex: index, fixedColor: Colors.blue, onTap: (int idx){ setState(() { index=idx; }); }, items: [ BottomNavigationBarItem( icon: const Icon(Icons.access_alarm), title: Text('Title'), ), BottomNavigationBarItem( icon: const Icon(Icons.star), title: Text('Title'), ), BottomNavigationBarItem( icon: const Icon(Icons.pages), title: Text('Title'), ), BottomNavigationBarItem( icon: const Icon(Icons.adjust), title: Text('Title'), ), ] ), body:pages[index] , ); }}class Home1 extends StatelessWidget{ @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Home1'),), body: Center(child:Text('HOME1') ,), ); }}class Home2 extends StatelessWidget{ @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Home2'),), body: Center(child:Text('HOME2') ,), ); }}class Home3 extends StatelessWidget{ @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Home3'),), body: Center(child:Text('HOME3') ,), ); }}class Home4 extends StatelessWidget{ @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Home4'),), body: Center(child:Text('HOME4') ,), ); }}复制代码