Flutter 控件之UITextView的替代方案 （iOS视角）

效果

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: [
                        _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: [
              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);
  }
}