H5_Flutter/lib/view/choose_country.dart

import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';

import '../constants.dart';
import '../utils/size_fit.dart';
import 'component/top_container.dart';

class ChooseCountry extends StatefulWidget {
  const ChooseCountry({Key? key}) : super(key: key);

  @override
  State<ChooseCountry> createState() => _ChooseCountryState();
}

class _ChooseCountryState extends State<ChooseCountry> {
  String keyword = '';

  Widget item() {
    List<TextSpan> spans = [];
    int start = 0; // 当前要截取字符串的起始位置
    int end; // end 表示要高亮显示的文本出现在当前字符串中的索引

    String text = '中国中 86';
    String lightText = '中';

    // 如果有符合的高亮文字
    while ((end = text.indexOf(lightText, start)) != -1) {
      // 第一步：添加正常显示的文本
      spans.add(TextSpan(text: text.substring(start, end), style: TextStyle(color: Colors.white, fontSize: 14.px)));
      // 第二步：添加高亮显示的文本
      spans.add(TextSpan(text: lightText, style: TextStyle(color: const Color(0xFFFF9900), fontSize: 14.px)));
      // 设置下一段要截取的开始位置
      start = end + lightText.length;
    }

    // 下面这行代码的意思是
    // 如果没有要高亮显示的，则start=0，也就是返回了传进来的text
    // 如果有要高亮显示的，则start=最后一个高亮显示文本的索引，然后截取到text的末尾
    spans.add(
      TextSpan(text: text.substring(start, text.length), style: TextStyle(color: Colors.white, fontSize: 14.px)),
    );

    return GestureDetector(
      onTap: (){
        Navigator.of(context).pop();
      },
      child: Container(
      height: 50.px,
      alignment: Alignment.centerLeft,
      padding: EdgeInsets.fromLTRB(30.px, 15.px, 30.px, 15.px),
      child: RichText(text: TextSpan(children: spans)),
    ),);
  }

  @override
  Widget build(BuildContext context) {
    SizeFit.initialize(context);
    return Material(
        color: kBgColor,
        child: TopContainer(
            child: Stack(children: [
          SingleChildScrollView(
            child: Column(
              children: [
                SizedBox(
                  height: 72.px,
                ),
                item(),
                item(),
                item(),
                item(),
                item(),
                item(),
                item(),
                item(),
                item(),
                item(),
                item(),
                item(),
                item(),
                item(),
                item(),
                item(),
                item(),
                item(),
                item(),
                item(),
              ],
            ),
          ),
          Positioned(
              left: 0,
              right: 0,
              bottom: 0,
              height: 48.px,
              child: Container(
                decoration: const BoxDecoration(
                    gradient: LinearGradient(
                        begin: Alignment.topCenter,
                        end: Alignment.bottomCenter,
                        colors: [
                      Color(0x00131314),
                      Color(0xFF131314),
                      Color(0xFF131314),
                    ])),
              )),
          Column(
            children: [
              Container(
                height: 72.px,
                padding: EdgeInsets.only(left: 16.px),
                decoration: const BoxDecoration(
                    gradient: LinearGradient(
                        begin: Alignment.topCenter,
                        end: Alignment.bottomCenter,
                        colors: [
                      Color(0xFF131314),
                      Color(0xFF131314),
                      Color(0xFF131314),
                      Color(0x00131314)
                    ])),
                child: Row(
                  children: [
                    Expanded(
                        child: Container(
                      height: 40.px,
                      padding: EdgeInsets.only(left: 10.px, right: 10.px),
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(20.px),
                          color: const Color(0xFF2C2C2E)),
                      child: Row(
                        children: [
                          SvgPicture.asset(
                            'assets/icons/search.svg',
                            width: 16.px,
                            height: 16.px,
                          ),
                          SizedBox(
                            width: 12.px,
                          ),
                          Expanded(
                              child: TextField(
                            autofocus: true,
                            cursorColor: kBtnColor,
                            onChanged: (value) {
                              setState(() {
                                keyword = value;
                              });
                            },
                            style: TextStyle(
                                color: Colors.white,
                                fontSize: 14.px),
                            decoration: InputDecoration(
                              border: InputBorder.none,
                              hintText: '请输入您的昵称',
                              hintStyle: TextStyle(
                                  fontSize: 14.px,
                                  color: const Color(0xFF74747A)),
                              counterText: "",
                            ),
                          ))
                        ],
                      ),
                    )),
                    GestureDetector(
                      onTap: (){
                        Navigator.of(context).pop();
                      },
                      child: Container(
                        width: 72.px,
                        alignment: Alignment.center,
                        child: Text(
                          '取消',
                          style: TextStyle(color: kThemeColor, fontSize: 14.px),
                        ),
                      ),
                    )
                  ],
                ),
              )
            ],
          ),
        ])));
  }
}