KM的博客.

Flutter Widget

Flutter
字数统计: 939阅读时长: 5 min
2021/03/15

Flutter常见Widget

Expanded()按照比例分配

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// expand
import 'package:flutter/material.dart';

class ExpandedLearn extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text('Expand')
      ),
      body: Row(children: <Widget>[
        // 根据 flex系数 2:1 分配剩余空间
        Expanded(
          flex:2,
          child: Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20),
                gradient: LinearGradient(colors: [Colors.blue, Colors.purple]),

              ),
            )
        ),
        Expanded(
          flex: 1,
          child: Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20),
                gradient: LinearGradient(colors: [Colors.red, Colors.orange]),

              ),
            )
          )
      ],
    )
    );
  }
}

TextFormField对齐问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
Row(
        children: <Widget>[
          Container(
            width: 160,
            child: TextFormField(
              style: TextStyle(fontSize: 14),
              controller: widget.textEditingController,
              inputFormatters: listTextInputFormatter,
              keyboardType: TextInputType.numberWithOptions(decimal: true),
              textAlign: TextAlign.right,
              decoration: InputDecoration(
                isDense: true,
                contentPadding:
                EdgeInsets.all(1),
                border: InputBorder.none,
                hintStyle: TextStyle(
                    fontSize: 15,
                    color: Pigment.fromString(AppColor.colorC1C1C1)),
                hintText: widget.hintTip ?? "",
              ),
              validator: (value) {
                if (value.trim().length > 0) {
                  if (widget.digitalNum != null) {
                    //要么两位小数 要么整数，后续再加
                    if (widget.digitalNum == 2) {
                      if (double.parse(value.trim()) > widget.maxRange) {
                        isInvalid = true;
                        errorMsg = "超出最大范围";
                      }else if (double.parse(value.trim()) == 0 ) {
                        isInvalid = true;
                        errorMsg = "请输入大于0的数";
                      }else{
                        isInvalid =false;
                        errorMsg="";
                      }
                    } else {
                      if (int.parse(value.trim()) > widget.maxRange) {
                        isInvalid = true;
                        errorMsg = "超出最大范围";
                      }else if (double.parse(value.trim()) == 0 ) {
                        isInvalid = true;
                        errorMsg = "请输入大于0的数";
                      } else{
                        isInvalid =false;
                        errorMsg="";
                      }
                    }
                  }else{
                    isInvalid =false;
                    errorMsg="";
                  }
                } else {
                  if (widget.verify != null) {
                    isInvalid = true;
                    errorMsg = DecorationConstant.notAllowedNull;
                  } else{
                    isInvalid =false;
                    errorMsg="";
                  }
                }
                setState(() {});
                return null;
              },
              onChanged: (value){
               widget.callbackChanged(true);
              },
              //当 Form 表单调用保存方法 Save时回调的函数。
              onSaved: (value) {
                if (widget.callBack != null) {
                  widget.callBack(value);
                }
              },
            ),
          ),
          Container(
            padding: EdgeInsets.only(left: 4),
            child: Text(
              widget.rightValue,
              style: TextStyle(
                  color: Pigment.fromString(AppColor.color323232),
                  fontSize: 15),
            ),
          )
        ],
      );

Android手势失效问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/// ```dart
 /// double _currentValue = 0.2;
 ///
 /// @override
 /// Widget build(BuildContext context) {
 ///   EdgeInsets systemGestureInsets = MediaQuery.of(context).systemGestureInsets;
 ///   return Scaffold(
 ///     appBar: AppBar(title: Text('Pad Slider to avoid systemGestureInsets')),
 ///     body: Padding(
 ///       padding: EdgeInsets.only( // only left and right padding are needed here
 ///         left: systemGestureInsets.left,
 ///         right: systemGestureInsets.right,
 ///       ),
 ///       child: Slider(
 ///         value: _currentValue.toDouble(),
 ///         onChanged: (double newValue) {
 ///           setState(() {
 ///             _currentValue = newValue;
 ///           });
 ///         },
 ///       ),
 ///     ),
 ///   );
 /// }
 /// ```
 /// {@end-tool}
 final EdgeInsets systemGestureInsets;

SELECT DATE问题

showDatePicker显示SELECT DATE

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
showDatePicker(
  selectableDayPredicate: (dateTime) {
    return listSelectDays.contains(dateTime);
  },
  context: context,
  initialDate: DateTime.parse(currentSelectDate),// "07-27"
  firstDate: DateTime.parse(startSelectDate),
  lastDate: DateTime.parse(lastSelectDate),
  locale: Locale('zh'),
  // helpText: "",
).then((DateTime val) {
  currentSelectDate = DateFormat("yyyy-MM-dd").format(val);
  _loadTimelineData();
}).catchError((err) {
  L.e(err.toString());
});

image.png

Flutter v1.12.13+hotfix.8

1
2
3
4
5
6
7
8
9
10
11
12
13
14
FlatButton(onPressed: () async {
  var result = await showDatePicker(
      context: context,
      initialDate: DateTime.now(),
      firstDate: DateTime(2020),
      lastDate: DateTime(2022),
      selectableDayPredicate: (DateTime day) {
        return day.difference(DateTime.now()).inDays < 2;
      },
  );
  print("result:\(result)");
},
    child: Text("日期选择器")
),

image.png

DataTable in Flutter

Add DataTable Widget,

1
2
3
4
5
DataTable(
   columns:[],
   rows:[],
   ...
),

define its Columns,

1
2
3
4
5
6
7
8
9
10
11
columns: [
     DataColumn(
        label: Text("Name"),
        numeric: false,
     ),
     DataColumn(
        label: Text("Weapons"),
        numeric: false,
       ),
     ],
...

Map data to the Rows

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
rows: avengers
    .map(
      (avenger) => DataRow(
          selected: selectedAvengers.contains(avenger),
          cells: [
            DataCell(
              Text(avenger.name),
              onTap: () {
                 // write your code..
              },
            ),
            DataCell(
              Text(avenger.weapon),
            ),
          ]),
    )
    .toList(),
...

And that’s it

GridView

shrinkWrap

════════ Exception caught by rendering library ═════════════════════════════════

The following assertion was thrown during performResize():

Vertical viewport was given unbounded height.

Viewports expand in the scrolling direction to fill their container. In this case, a vertical viewport was given an unlimited amount of vertical space in which to expand. This situation typically happens when a scrollable widget is nested inside another scrollable widget.

If this widget is always nested in a scrollable widget there is no need to use a viewport because there will always be enough vertical space for the children. In this case, consider using a Column instead. Otherwise, consider using the “shrinkWrap” property (or a ShrinkWrappingViewport) to size the height of the viewport to the sum of the heights of its children.

Stack的使用

效果图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
new Container(
      height: 175,
      color: Colors.purple,
      child: new ConstrainedBox(
        constraints: BoxConstraints.expand(),
        child: Stack(
          alignment:Alignment.center , //指定未定位或部分定位widget的对齐方式
          children: <Widget>[
                Positioned(
                  top: ScreenUtil().setHeight(70),
                    left: ScreenUtil().setWidth(102),
                    child: new Container(
                      color: Colors.yellow,
                      width: ScreenUtil().setWidth(100),
                      height: ScreenUtil().setHeight(130),
                    )
                ),
                Positioned(
                  bottom: 0,
                  left: ScreenUtil().setWidth(52),
                  child: new Container(
                    color: Colors.red,
                    width: ScreenUtil().setWidth(200),
                    height: ScreenUtil().setHeight(233),
                  ),
                ),
                Positioned(
                  top: ScreenUtil().setHeight(45),
                  left: ScreenUtil().setWidth(325),
                  child: new Container(
                    color: Colors.red,
                    width: ScreenUtil().setWidth(100),
                    height: ScreenUtil().setHeight(130),
                  ),
                ),
                Positioned(
                  bottom: 0,
                  child: new Container(
                    color: Colors.green,
                    width: ScreenUtil().setWidth(246),
                    height: ScreenUtil().setHeight(264),
                  ),
                ),
                Positioned(
                  top: ScreenUtil().setHeight(90),
                  right: ScreenUtil().setWidth(102),
                  child: new Container(
                    color: Colors.green,
                    width: ScreenUtil().setWidth(100),
                    height: ScreenUtil().setHeight(130),
                  )
                ),
                Positioned(
                  bottom: 0,
                  right: ScreenUtil().setWidth(52),
                  child: new Container(
                    color: Colors.red,
                    width: ScreenUtil().setWidth(200),
                    height: ScreenUtil().setHeight(222),
                  ),
                ),
              ],
            ),
        ),
    )

原文作者：KM

原文链接：https://mingriweiji-github.github.io/2021/03/15/Flutter%20Widget/

发表日期：三月 15日 2021, 12:25:45 中午

更新日期：五月 13日 2022, 8:12:12 晚上

版权声明：本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

CATALOG
  1. 1. Flutter常见Widget
    1. 1.1. Expanded()按照比例分配
    2. 1.2. TextFormField对齐问题
    3. 1.3. Android手势失效问题
    4. 1.4. SELECT DATE问题
    5. 1.5. showDatePicker显示SELECT DATE
      1. 1.5.0.1. Flutter v1.12.13+hotfix.8
    6. 1.5.1. DataTable in Flutter
  2. 1.6. GridView
  3. 1.7. Stack的使用
    1. 1.7.0.1. 效果图
  • 1.8.
    • Total : 35
    2022
    2021
    2020
    2019
    2018
    java 算法 Swift专题 iOS Flutter 开发工具 Swift book
    算法 源码 Flutter 指南 Swift 图像 逆向 book