Flutter仿學習強國填空題

下面是學習強國的效果

然後看下我實現的效果

重點有兩個部分：

使用richtext，然後根據答案的長度，動態設定需要填空的個數。richtext中有widgetspan，使用這個就能方便地在richtext中新增自定義的控制項，android中應該不能這麼簡單地實現。

設定乙個佔位的textfield，它的寬度為0，也就是相當於輸入框是隱藏的狀態，用於獲取使用者的輸入

下面是完整**，這個**是簡化後的，因為實際專案中邏輯會複雜很多。實際專案中因為有填空題，單選題和多選題，挑戰答題，需要分元件去開發，可以使用provider來實現各個元件間的通訊。在挑戰答題中還有一些動畫效果。如果想完全仿學習強國的業務邏輯，還是有些複雜的。

import
'package:flutter/material.dart'
;import
'package:flutter/services.dart'
;import
'package:flutter/widgets.dart'
;//import 'learn_color_m.dart';
///填空題
//globalkey<_fillquestionstate> fillquestionkey = globalkey();
class
fillquestion
extends
statefulwidget):
super
(key: key)
;@override
_fillquestionstate createstate()
=>
_fillquestionstate()
;}class
_fillquestionstate
extends
state
@override
widget build
(buildcontext context)
widget _buildcolumn()
list
_buildspans
(int count, string answerstr, bool isfocus)
widgetspan widgetspan =
newwidgetspan
(child:
_buildspanchild
(answerstr[i]
, isshowborder));
children.
add(widgetspan);}
else
widgetspan widgetspan =
newwidgetspan
(child:
_buildspanchild
(" "
, isshowborder));
children.
add(widgetspan);}
textspan textspan =
newtextspan
(text:
" ");
children.
add(textspan);}
return children;
} widget _buildspanchild
(string datatext, bool isshowborder)if(
!isfocus));
}///獲取鍵盤的焦點，並且主動調起鍵盤
focusscope.
of(context)
.requestfocus
(textfieldfocusnode)
;// 獲取焦點
systemchannels.textinput.invokemethod<
void
>
('textinput.show');
//主動調起鍵盤，否則按返回鍵隱藏鍵盤後不能再次彈出},
child:
container
( alignment: alignment.center,
width: boxsize,
height: boxsize,
child:
text
( datatext,
style:
gettextstyle()
,), decoration:
getboxdecoration
(isshowborder),)
,);}
gettextstyle()
///還未確定
// else 
return
textstyle
(color: color, fontsize:15)
;}getboxdecoration
(bool isshowborder)
///還未確定
// else 
return
boxdecoration
( border: border,
color:
color
(0xfff2f3f5),
);}///這個輸入框不顯示，只是用於獲取使用者的輸入
widget _buildplaceholder()
);})
,);}
}

Flutter仿學習強國填空題

程式填空題

編譯原理填空題

軟體測試填空題

Flutter仿學習強國填空題

程式填空題

編譯原理填空題

軟體測試填空題

相關推薦