1_TextField(文本框)

---

import 'package:flutter/material.dart';void main() {runApp(MaterialApp(home: MyEditText(),)); }class MyEditText extends StatefulWidget {@overrideMyEditTextState createState() => MyEditTextState(); }class MyEditTextState extends State<MyEditText> {String results = "";final TextEditingController controller = TextEditingController();@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("Using EditText"),backgroundColor: Colors.red,),body: Container(child: Center(child: Column(children: <Widget>[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 {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Retrieve Text Input',home: MyForm(),);} }// Define a Custom Form Widget class 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<MyForm> {// Create a text controller. We will use it to retrieve the current value// of the TextField!final myController = TextEditingController();@overridevoid dispose() {// Clean up the controller when the Widget is disposedmyController.dispose();super.dispose();}@overrideWidget 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// TextEditingControllercontent: 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 {@overrideWidget 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 {@overrideWidget 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 {@overrideWidget 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{@overrideWidget build(BuildContext context) {return Scaffold(body: Center(child:Text('HOME1') ,),);} }class Home2 extends StatelessWidget{@overrideWidget build(BuildContext context) {return Scaffold(body: Center(child:Text('HOME2') ,),);} }class Home3 extends StatelessWidget{@overrideWidget 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 {@overrideWidget 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<MyHomePage> {int index=0;List<Widget> pages=[Container(color: Colors.deepOrange),Container(color: Colors.amber),Container(color: Colors.blue),Container(color: Colors.green),];@overrideWidget 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 {@overrideWidget 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<MyHomePage> {int index=0;List<Widget> pages=[Home1(),Home2(),Home3(),Home4()];@overrideWidget 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{@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Home1'),),body: Center(child:Text('HOME1') ,),);} }class Home2 extends StatelessWidget{@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Home2'),),body: Center(child:Text('HOME2') ,),);} }class Home3 extends StatelessWidget{@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Home3'),),body: Center(child:Text('HOME3') ,),);} }class Home4 extends StatelessWidget{@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Home4'),),body: Center(child:Text('HOME4') ,),);} } 復制代碼

轉載于:https://juejin.im/post/5c6ce72af265da2dcc7fea09

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的2_flutter_TextField(文本框),TabBar(选项卡),bottomNavigationBar(底部导航栏)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。