Flutter元件大全(五)

HTML小白發表於2020-06-01

1.Slider 滑塊

class DemoPage extends StatefulWidget {
  @override 
  _DemoPageState createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> {

  double value = 0.0;
   @override 
   Widget build(BuildContext context) {
       return  Slider(
         value: value, 
         min: 0.0,
         max: 100.0,
         label: '當前音量',
         activeColor: Colors.green,
         inactiveColor: Colors.redAccent,
        //  分塊
        divisions: 100,
         onChanged: (double){
           setState(() {
             value = double.roundToDouble();
           });
         },
        //  滑動結束
         onChangeEnd: (val){},
        //  滑動開始
         onChangeStart: (val){},
        );
   }
   
 }
複製程式碼

Flutter元件大全(五)

2.SliderTheme 滑塊主題

class DemoPage extends StatefulWidget {
  @override 
  _DemoPageState createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> {

  double value = 0.0;
   @override 
   Widget build(BuildContext context) {
       return  SliderTheme(
         data: SliderTheme.of(context).copyWith(
          //  實際進度顏色
          activeTrackColor: Colors.yellowAccent,
          // 未拖動顏色
          inactiveTrackColor: Colors.red,
          // 提示進度的氣泡的背景色
          valueIndicatorColor: Colors.blue,
          // 氣泡的文字顏色
          // valueIndicatorTextStyle: TextStyle(color: Colors.white)
          // 滑塊中心的顏色
          thumbColor: Colors.blueAccent,
          // 滑塊邊緣的顏色
          overlayColor: Colors.white,
          // 分割線顏色
          inactiveTickMarkColor: Colors.black
         ), 
         child: Slider(
            value: value, 
            min: 0.0,
            max: 100.0,
            label: '當前音量',
            // activeColor: Colors.green,
            // inactiveColor: Colors.redAccent,
            //  分塊
            divisions: 100,
            onChanged: (double){
              setState(() {
                value = double.roundToDouble();
              });
            },
            //  滑動結束
            onChangeEnd: (val){},
            //  滑動開始
            onChangeStart: (val){},
            )
        );
   }
   
 }

複製程式碼

Flutter元件大全(五)

3. 動畫padding

class DemoPage extends StatefulWidget {
  @override 
  _DemoPageState createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> {

  double paddingValue = 10.0;
   @override 
   Widget build(BuildContext context) {
       return  Column(
         children: [
           Container(
             width: 300.0,
             height: 300.0,
             color: Colors.red,
            //  帶動畫的內邊距
            child: AnimatedPadding(
              // 均衡的內邊距
              padding: EdgeInsets.symmetric(
                  horizontal: paddingValue,
                  vertical: paddingValue
              ),
              // 動畫時長
              duration: Duration(milliseconds: 100),
              // 動畫型別
              curve: Curves.easeInOut,
              child: Container(
                height: 200.0,
                color: Colors.green
              ),
            ),
           ),
           RaisedButton(
             child: Text('切換'),
             onPressed: (){
               if(paddingValue == 10.0){
                 setState(() {
                   paddingValue = 20.0;
                 });
               }else{
                 setState(() {
                   paddingValue = 10.0;
                 });
               }
             }
            )
         ],
       );
   }
   
 }

複製程式碼

Flutter元件大全(五)

4.padding

class DemoPage extends StatefulWidget {
  @override 
  _DemoPageState createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> {

  double paddingValue = 10.0;
   @override 
   Widget build(BuildContext context) {
       return  Column(
         children: <Widget>[
           Container(
             width:300.0,
             height: 300.0,
             color: Colors.grey,
             padding: EdgeInsets.all(10.0),
             child: Container(
               color: Colors.greenAccent,
             )
           )
         ],
       );
   }
   
 }
複製程式碼

Flutter元件大全(五)

5.IndexedStack

只顯示一個元素

class DemoPage extends StatefulWidget {
  @override 
  _DemoPageState createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> {

  final int currentIndex = 1;
   @override 
   Widget build(BuildContext context) {
       return  IndexedStack(
         index: currentIndex,
        //  文字容器
         children: <Widget>[
          //   顯示當前 元素
           CircleAvatar(
             backgroundColor: Colors.greenAccent,
             radius: 50.0
           ),
           Container(
             decoration: BoxDecoration(
               color: Colors.blue
             ),
             child: Text(
               '嘿嘿'
             ),
           )
         ],
       );
   }
   
 }

複製程式碼

Flutter元件大全(五)

6.Stack 層疊 定位

class DemoPage extends StatefulWidget {
  @override 
  _DemoPageState createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> {


   @override 
   Widget build(BuildContext context) {
       return  Column(
         children: <Widget>[
           Container(
             width: 300.0,
             height: 300.0,
             color: Colors.red,
            //  層疊元件
             child: Stack(
               alignment: Alignment.center,
               overflow: Overflow.clip,
               children: <Widget>[
                //  這裡 的元件 誰在前面 誰就在下面
                 Container(
                   color: Colors.yellowAccent,
                   width: 100.0,
                   height: 50.0
                 ),
                 Text('data'),
                  Positioned(
                    left: 10,
                    bottom: 30,
                    child: Text('相對父容器定位')
                  )
               ],
             ),
           )
         ]
       );
   }
   
 }

複製程式碼

Flutter元件大全(五)

7.AnimatedSwitcher 動畫

class DemoPage extends StatefulWidget {

  const DemoPage({Key key}) : super(key : key);

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

class _DemoPageState extends State<DemoPage> {
  
  int count = 0 ;

   @override 
   Widget build(BuildContext context) {
       return  Column(
         mainAxisAlignment: MainAxisAlignment.center,
         crossAxisAlignment: CrossAxisAlignment.center,
         children: <Widget>[
          //  帶動畫的Switcher
           AnimatedSwitcher(
            //  動畫時長
              duration: Duration(milliseconds: 500),
              // 過度
              transitionBuilder: (Widget child, Animation<double> animation){
                return ScaleTransition(scale: animation, child: child);
              },
              // 動畫顯示內容
              child: Text(
                "動畫$count",
                key: ValueKey<int>(count),
              ),

            ),
            RaisedButton(
              child: Text('點選'),
              onPressed: (){
                setState(() {
                  count += 1;
                });
              }
            )
         ],
       );
   }
   
 }

複製程式碼

Flutter元件大全(五)

8.Switch 開關

class DemoPage extends StatefulWidget {

  const DemoPage({Key key}) : super(key : key);

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

class _DemoPageState extends State<DemoPage> {
  
  int count = 0 ;
  bool check = false;
   @override 
   Widget build(BuildContext context) {
       return  Column(
         mainAxisAlignment: MainAxisAlignment.center,
         crossAxisAlignment: CrossAxisAlignment.center,
         children: <Widget>[
           Switch(
            //  是否開啟
             value: check, 
             onChanged: (bool val){
               setState(() {
                 check = val;
               });
             }
            ),
            Switch.adaptive(
              value: check, 
              // 啟用時的顏色
              activeColor: Colors.red,
              // 非啟用狀態
              inactiveThumbColor: Colors.greenAccent,
              // 非啟用狀態的 軌道顏色
              inactiveTrackColor: Colors.yellow,
              // inactiveThumbImage: ,
              onChanged: (bool val){
               setState(() {
                 check = val;
               });
             }
            )
         ],
       );
   }
   
 }

複製程式碼

Flutter元件大全(五)

9.SwitchListTile

class DemoPage extends StatefulWidget {

  const DemoPage({Key key}) : super(key : key);

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

class _DemoPageState extends State<DemoPage> {
  
  int count = 0 ;
  bool check = false;
   @override 
   Widget build(BuildContext context) {
       return  Column(
        //  mainAxisAlignment: MainAxisAlignment.center,
        //  crossAxisAlignment: CrossAxisAlignment.center,
         children: <Widget>[
           SwitchListTile(
             value: check, 
             activeColor: Colors.yellow,
             title: Text("列印"),
             subtitle: Text('子標題'),
             secondary: Icon(Icons.print),
             onChanged: (bool val){
               setState(() {
                 check = val;
               });
             }
            )
         ],
       );
   }
   
 }

複製程式碼

Flutter元件大全(五)

10.Table

class DemoPage extends StatefulWidget {

  const DemoPage({Key key}) : super(key : key);

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

class _DemoPageState extends State<DemoPage> {
  
  int count = 0 ;
  bool check = false;
   @override 
   Widget build(BuildContext context) {
       return  Column(
         mainAxisAlignment: MainAxisAlignment.center,
         crossAxisAlignment: CrossAxisAlignment.center,
         children: <Widget>[
           Table(
             columnWidths: {
              //  列寬
               0: FixedColumnWidth(100.0),
               1: FixedColumnWidth(100.0),
               2: FixedColumnWidth(100.0),
             },
             border: TableBorder.all(
               color: Colors.greenAccent,
               width: 2.0,

             ),
             children: [
               TableRow(
                 decoration: BoxDecoration(
                   color: Colors.greenAccent,
                 ),
                 children: [
                   SizedBox(
                     height: 30.0,
                     child: Text('姓名'),
                   ),
                   
                   Text('性別'),
                   Text('年齡'),
                 ]
               ),
               TableRow(
                 children: [
                   Text('張三'),
                   Text('男'),
                   Text('10'),
                 ]
               ),
               TableRow(
                 children: [
                   Text('李四'),
                   Text('女'),
                   Text('20'),
                 ]
               )
             ]
           )
         ],
       );
   }
   
 }

 
複製程式碼

Flutter元件大全(五)

11.RichText 富文字元件


class DemoPage extends StatefulWidget {

  const DemoPage({Key key}) : super(key : key);

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

class _DemoPageState extends State<DemoPage> {
  

   @override 
   Widget build(BuildContext context) {
       return  Column(
         mainAxisAlignment: MainAxisAlignment.center,
         crossAxisAlignment: CrossAxisAlignment.center,
         children: <Widget>[
           RichText(
             text: TextSpan(
               text: 'I',
               children: <TextSpan>[
                 TextSpan(
                   text: 'want',
                    style: TextStyle(
                      color: Colors.yellow
                    )
                  ),
                  TextSpan(
                   text: 'study',
                    style: TextStyle(
                      color: Colors.red
                    )
                  )
               ]
             ),

            )
         ],
       );
   }
   
 }

 
複製程式碼

Flutter元件大全(五)

12.Text

class DemoPage extends StatefulWidget {

  const DemoPage({Key key}) : super(key : key);

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

class _DemoPageState extends State<DemoPage> {
  

   @override 
   Widget build(BuildContext context) {
       return  Column(
         mainAxisAlignment: MainAxisAlignment.center,
         crossAxisAlignment: CrossAxisAlignment.center,
         children: <Widget>[
           Text(
             'hello word',
             style: TextStyle(
               color: Colors.red,
               fontSize: 36.0,
               decoration: TextDecoration.lineThrough,
               decorationColor:  Colors.blue
             ),
            ),
            Text(
             'hello word',
             style: TextStyle(
               color: Colors.red,
               fontSize: 36.0,
               decoration: TextDecoration.underline,
               decorationColor:  Colors.blue
             ),
            ),
            Text(
             'hello word',
             style: TextStyle(
               color: Colors.red,
               fontSize: 36.0,
               decoration: TextDecoration.underline,
               decorationStyle: TextDecorationStyle.dashed,
               decorationColor:  Colors.blue
             ),
            ),
            Text(
             'hello word',
             style: TextStyle(
               color: Colors.red,
               fontSize: 36.0,
               fontWeight: FontWeight.bold,
               fontStyle: FontStyle.italic,
               decoration: TextDecoration.underline,
               decorationStyle: TextDecorationStyle.dashed,
               decorationColor:  Colors.blue
             ),
            )
         ],
       );
   }
   
 }
複製程式碼

Flutter元件大全(五)

13.MaterialApp

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  /*
   * title 在工作管理員視窗所顯示的應用名字 
   * theme 應用UI
   * color 應用的主要顏色
   * home 應用預設所顯示的介面 Widget
   * routes 應用的定機導航表格 多頁面應用用來控制頁面跳轉的
   * initiakRoute 第一個顯示的路由名字 預設值未 window.defaultRouteName
   * onGenerateRoute 生成路由的回撥函式 當導航的命名路由的時候 會使用這個來生成介面
   * onLocaleChanged 系統修該語言的時候 觸發的回撥
   * navigatorObservers:  應用Navigator 的監聽器
   * dubugShowMaterialGrid 是否顯示 material design
   * showPerformanceOverlay 顯示效能標籤
   * checkerboardRasterCacheImage 
   * showSemanticsDebugger
   * debugShowCheckedModeBanner
   * */ 
  @override 
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '應用名稱',
      home: Text('body'),
      theme: ThemeData(
        primaryColor: Colors.redAccent
      ),
      routes: <String, WidgetBuilder>{
        // '/': (BuildContext context) => D();
      }
    );
  }
}
複製程式碼

相關文章