效果
20200423205534.jpg
最近在实现可滑动文本，带指示条的一个类似UITextView的控件来做一个Dialog。网上搜了一遍暂时没有搜到替代方案，简单写了一个类似TextView文本弹窗的。有更好的方式欢迎交流学习。
Code
使用方式
///show
TicketRuleDialog(title: '规则名称', ruleText: '规则内容').showRuleDialog(context);
///dismiss
TicketRuleDialog.dismissDialog(context);
完整Dart代码
import 'package:flutter/material.dart';
class TicketRuleDialog extends Dialog{
String title;
String ruleText;
TicketRuleDialog({Key key, @required this.title, @required this.ruleText});
@override
Widget build(BuildContext context) {
return GestureDetector(
child: Material(
type: MaterialType.transparency,
child: Center(
child:GestureDetector(
onTap: (){},
child: SizedBox(
width: 300,
height: 320,
child: Container(
decoration: _dialogDecoration(),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
_ruleTitleWidget(),
_ruleTextScrollView(),
],
),
),
),
)
),
),
onTap:(){
TicketRuleDialog.dismissDialog(context);
}
) ;
}
Decoration _dialogDecoration () {
return ShapeDecoration(
color: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(6)
)
)
);
}
Widget _ruleTitleWidget() {
return Padding(
padding: const EdgeInsets.only(top: 20.0,bottom: 10,left: 0,right: 0),
child: Text(
title,
textAlign: TextAlign.center,
style: TextStyle(fontSize: 18.0, color: Colors.black,fontWeight: FontWeight.w500),
)
);
}
Widget _ruleTextScrollView (){
return Container(
height: 241,
padding: EdgeInsets.only(bottom: 10),
child: Scrollbar(
child: ListView(
children: <Widget>[
Container(
padding: EdgeInsets.only(left: 20,right: 20),
child: Text(
ruleText,
overflow: TextOverflow.fade,
textAlign: TextAlign.left,
style: TextStyle(fontSize: 14.0, color: Colors.black),
),
),
],
),
)
);
}
void showRuleDialog (BuildContext context){
showDialog(
context: context,
builder: (context) {
return this;
});
}
static void dismissDialog(BuildContext context){
Navigator.pop(context);
}
}
